/*
 * UX refinements layered over the Vite bundle (resources/js is older than the deployed build,
 * so these live here instead of being rebuilt). Uses the theme's own tokens:
 * Inter, graphite #2c343a, light #f4f4f5, green #1a7cad.
 */

/* ---------- Home (Ukrainian landing) ---------- */
.bbp-home {
    max-width: 640px;
    margin: 6vh 0 40px;
}

.bbp-home .blabla-comment .text {
    font-size: 15px;
    line-height: 1.5;
}

.bbp-hero h1 {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    color: #2c343a;
    letter-spacing: -0.01em;
}

.bbp-hero p {
    margin: 0;
    color: #4a5258;
    font-weight: 500;
}

.bbp-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: bbp-step;
    display: grid;
    gap: 12px;
}

.bbp-steps li {
    counter-increment: bbp-step;
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: start;
    gap: 10px;
    font-weight: 500;
    color: #2c343a;
}

.bbp-steps li::before {
    content: counter(bbp-step);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2c343a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbp-steps b {
    font-weight: 700;
}

.bbp-note {
    margin: 14px 0 0;
    font-size: 13px;
    color: #5b6368;
}

.bbp-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}

.bbp-actions .menu-button.green {
    margin: 0;
    padding: 13px 16px;
    font-size: 15px;
    gap: 8px;
}

.bbp-actions .menu-button.green svg {
    fill: #fff;
}

.bbp-secondary {
    color: #2c343a;
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bbp-secondary:hover {
    color: #13719f;
}

.bbp-country-wrap .text {
    padding-top: 0;
    padding-bottom: 0;
}

.bbp-country {
    margin: 0;
    font-size: 13px;
    color: #5b6368;
}

.bbp-country summary {
    cursor: pointer;
    width: fit-content;
    font-weight: 500;
}

.bbp-country .sub-filter {
    justify-content: flex-start;
}

/* ---------- Aside: the "get offers" link reuses .menu-button only for its JS ---------- */
.aside-menu a.bbp-aside-link {
    display: flex;
    width: 100%;
    margin: 0;
    gap: 0 5px;
    background: transparent;
    padding: 10px;
    border-radius: 7px;
    color: #1f3541;
    font-size: 14px;
    font-weight: 500;
    animation: none;
}

/* ---------- Pricing: brand-coloured buttons instead of default bootstrap blue ---------- */
.pricing-plan .cta-button {
    background-color: #2c343a;
    border-radius: 19px;
    font-weight: 600;
}

.pricing-plan .cta-button:hover {
    background-color: #229ed9;
}

/* ---------- Readability: small grey footer links in the right aside ---------- */
.aside-right .links a,
#aside-right .links a,
.wrap-aside .links a {
    font-size: 12px;
    color: #5b6368;
}

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
    html,
    body {
        overflow-x: hidden;
    }

    .sub-filter {
        flex-wrap: wrap;
    }

    .blabla-comment {
        max-width: 100%;
    }

    .blabla-comment .text {
        max-width: 100%;
    }

    .bbp-home {
        margin-top: 24px;
        padding: 0 0 0 16px;
    }

    .bbp-hero h1 {
        font-size: 21px;
    }

}

/* ---------- Light button with the look of .menu-button but without its category-menu JS ---------- */
.bbp-btn-light {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    padding: 13px 16px;
    border-radius: 9px;
    background: #f4f4f5;
    color: #2c343a;
    transition: background .2s;
}

.bbp-btn-light:hover {
    background: #f0f2f5;
    color: #2c343a;
}

/* ---------- Pricing lists: the theme reset removed bullets/numbers ---------- */
.bbp-list {
    margin: 10px 0 24px;
    padding-right: 22px;
    display: grid;
    gap: 6px;
}

ul.bbp-list {
    list-style: disc;
}

ol.bbp-list {
    list-style: decimal;
}

.bbp-list li {
    padding-right: 4px;
    line-height: 1.5;
}

.pricing-plan table {
    border-radius: 12px;
    overflow: hidden;
}

/* ---------- Pricing table on phones: it had min-width 400px and the "Максимум" column was cut off ---------- */
@media (max-width: 767px) {
    .pricing-plan table {
        min-width: 0 !important;
        width: 100%;
        font-size: 13px;
    }

    .pricing-plan th,
    .pricing-plan td {
        padding: 10px 4px !important;
    }

    .pricing-plan .cta-button {
        padding: .55rem .7rem;
        font-size: 13px;
    }
}

/* ---------- Buyer cabinet: heading with a "new request" action ---------- */
.bbp-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bbp-page-head .heading {
    margin: 0;
}

.bbp-new-request {
    padding: 11px 16px !important;
    font-size: 14px;
    animation: none !important;
}

/* ---------- Seller filter: intro + bottom save button ---------- */
.seller-filter .request-main {
    min-height: 0;
}

.bbp-filter-intro {
    max-width: 580px;
    margin: 20px auto 18px;
}

.bbp-filter-intro h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #2c343a;
}

.bbp-filter-intro p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4a5258;
}

.bbp-filter-save {
    max-width: 580px;
    margin: 20px auto 0;
    display: flex;
    justify-content: flex-end;
}

.bbp-filter-save .popup-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
}

.bbp-filter-save svg {
    fill: #fff;
}

/* =====================================================================
 * Global polish: cards, headings, sidebar FAQ, buttons, focus states
 * ===================================================================== */
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* request / offer cards: soft elevation instead of a flat grey outline
   (only clickable cards: the header wrapper also carries .request) */
.request.open-popup {
    background: #fff;
    border: 1px solid #e7e9ec !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .04);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.request.open-popup:hover {
    border-color: #d5d9de !important;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .08);
    transform: translateY(-1px);
}

.request.open-popup + .request.open-popup {
    margin-top: 18px;
}

/* seller filter accordions share the card look (not the sidebar FAQ) */
.seller-filter .accordeon .item-accordeon {
    border: 1px solid #e7e9ec !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* text pages: consistent heading hierarchy */
.page-works h2,
.page-works h3,
.page-contact h2,
.page-contact h3,
.request-main > h2 {
    color: #2c343a;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.page-works h3,
.page-contact h3 {
    margin-top: 36px;
    margin-bottom: 14px;
    font-size: 24px;
}

.page-contact h2 {
    font-size: 26px;
}

.page-works strong {
    display: inline-block;
    margin-top: 6px;
    color: #2c343a;
}

/* right-hand FAQ: readable size */
#aside-right {
    font-size: 13px;
    line-height: 1.5;
}

/* buttons */
.popup-button.blue:hover,
.menu-button.green:hover {
    background: #1f262b;
}

a:focus-visible,
button:focus-visible,
.menu-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #1a7cad;
    outline-offset: 2px;
}

/* pricing table: tidy header row */
.pricing-plan th {
    background: #f4f4f5;
    color: #2c343a;
    font-weight: 700;
}

.bbp-page-head {
    margin-bottom: 16px;
}

/* ---------- New request: budget + deadline ---------- */
.bbp-request-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.bbp-request-extra label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.bbp-request-extra .input {
    width: 100%;
}

@media (max-width: 575px) {
    .bbp-request-extra {
        grid-template-columns: 1fr;
    }
}

/* ---------- Home: value for both sides + illustrative example ---------- */
.bbp-value {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 34px 38px 0 0;
}

.bbp-value-card {
    background: #fff;
    border: 1px solid #e7e9ec;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.bbp-value-card h2 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: #2c343a;
}

.bbp-value-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.bbp-value-card li {
    position: relative;
    padding-right: 22px;
    font-size: 14px;
    line-height: 1.45;
    color: #3a4248;
}

.bbp-value-card li::before {
    content: "";
    position: absolute;
    right: 2px;
    top: 5px;
    width: 10px;
    height: 6px;
    border-right: 2px solid #229ed9;
    border-bottom: 2px solid #229ed9;
    transform: rotate(45deg);
}

.bbp-example {
    margin: 14px 38px 0 0;
    background: #f7f8f9;
    border: 1px dashed #d5d9de;
    border-radius: 16px;
    padding: 16px 20px;
}

.bbp-example-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #7a8288;
    margin-bottom: 8px;
}

.bbp-example-request {
    font-size: 14px;
    color: #2c343a;
    line-height: 1.5;
}

.bbp-example-offers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.bbp-example-offers > div {
    background: #fff;
    border: 1px solid #e7e9ec;
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    gap: 2px;
}

.bbp-example-offers span {
    font-size: 12px;
    color: #7a8288;
}

.bbp-example-offers b {
    font-size: 16px;
    color: #2c343a;
}

.bbp-example-offers small {
    font-size: 12px;
    color: #5b6368;
}

.bbp-example-offers .is-best {
    border-color: #229ed9;
    box-shadow: 0 0 0 1px #229ed9 inset;
}

.bbp-example-offers .is-best small {
    color: #13719f;
    font-weight: 600;
}

.bbp-example-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: #5b6368;
}

@media (max-width: 767px) {
    .bbp-value,
    .bbp-example {
        margin-right: 0;
    }

    .bbp-value,
    .bbp-example-offers {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
 * Refreshed UI kit (inspired by calm, editorial dashboards):
 * serif page titles, icon tiles, soft hover rows, dotted dividers.
 * ===================================================================== */
:root {
    --bbp-ink: #1f2326;
    --bbp-muted: #5c6166;
    --bbp-line: #ebe8e3;
    --bbp-tile: #f3f1ed;
    --bbp-hover: #f0f2f5;
    --bbp-accent: #229ed9; /* the buttons' blue = the logo's (owner 2026-10-16: «всі кнопки робимо в колір лого»; was #1a7cad for 4.6:1, 2026-10-09) */
    /* BlaBlaPrice's voice (owner 2026-10-03: the serif was hard to read on a phone): Inter, clear at small sizes */
    --bbp-serif: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.bbp-title {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--bbp-ink);
    margin: 6px 0 6px;
}

.bbp-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--bbp-muted);
}

.bbp-crumbs {
    font-size: 13px;
    color: #62676c;
}

.bbp-crumbs a {
    color: inherit;
}

.bbp-crumbs a:hover {
    color: var(--bbp-ink);
}

.bbp-crumbs span {
    margin: 0 6px;
}

.bbp-crumbs b {
    color: var(--bbp-ink);
    font-weight: 600;
}

.bbp-card {
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 16px;
    padding: 8px;
}

.bbp-tile {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bbp-tile);
    border: 1px solid var(--bbp-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3d4247;
    transition: background .15s;
}

.bbp-divider {
    border-top: 2px dotted #dedad3;
    margin: 6px 14px;
}

.bbp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bbp-ink);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}

.bbp-btn-primary:hover {
    background: #000;
    color: #fff;
}

/* ---------- New request page ---------- */
.bbp-form-page.request-main {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.bbp-form-page .request-body {
    display: none;
}

.bbp-req {
    max-width: 720px;
    margin: 28px auto 60px;
}

.bbp-req-head {
    margin-bottom: 22px;
}

.bbp-field {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 14px;
    margin: 0;
    border-radius: 12px;
    transition: background .15s;
    cursor: text;
}

.bbp-field:hover {
    background: var(--bbp-hover);
}

.bbp-field:hover .bbp-tile {
    background: #fff;
}

.bbp-field-body {
    display: block;
    min-width: 0;
}

.bbp-field-title {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--bbp-ink);
}

.bbp-field-hint {
    display: block;
    font-size: 13px;
    color: var(--bbp-muted);
    margin-top: 2px;
}

.bbp-field .input {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 8px;
    padding: 10px 12px;
    font-size: 15px;
    color: var(--bbp-ink);
    background: #fff;
    border: 1px solid #e3e0da;
    border-radius: 10px;
    box-shadow: none;
}

.bbp-field .input:focus {
    border-color: #b9b4ab;
    outline: none;
}

.bbp-textarea {
    min-height: 110px !important;
    resize: vertical;
}

.bbp-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.bbp-field-grid > .bbp-field:first-child {
    grid-column: 1 / -1;
}

.bbp-req-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
}

.bbp-note-inline {
    flex: 1 1 280px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--bbp-muted);
}

.bbp-note-inline .bbp-icon {
    color: var(--bbp-accent);
}

.bbp-req .bbp-btn-primary.popup-send {
    position: static !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
}

.bbp-req .bbp-btn-primary .bbp-icon {
    stroke: #fff;
}

@media (max-width: 991px) {
    .bbp-field-grid {
        grid-template-columns: 1fr;
    }

    .bbp-title {
        font-size: 26px;
    }

    .bbp-req {
        margin-top: 16px;
    }

    .bbp-req-actions .bbp-btn-primary {
        width: 100% !important;
        justify-content: center;
    }
}

/* ---------- Telegram-style avatars: two initials on a soft gradient ---------- */
.message .avatar.bbp-av {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    background: linear-gradient(-135deg, #8e9aaf, #5d6b82);
}

.bbp-av-0 { background: linear-gradient(-135deg, #ff885e, #ff516a) !important; }
.bbp-av-1 { background: linear-gradient(-135deg, #ffcd6a, #ffa85c) !important; }
.bbp-av-2 { background: linear-gradient(-135deg, #82b1ff, #665fff) !important; }
.bbp-av-3 { background: linear-gradient(-135deg, #a0de7e, #54cb68) !important; }
.bbp-av-4 { background: linear-gradient(-135deg, #53edd6, #28c9b7) !important; }
.bbp-av-5 { background: linear-gradient(-135deg, #72d5fd, #2a9ef1) !important; }
.bbp-av-6 { background: linear-gradient(-135deg, #e0a2f3, #d669ed) !important; }

/* ---------- Cabinet page titles (buyer) ---------- */
.bbp-page-head {
    align-items: flex-end;
    margin-top: 12px;
}

.bbp-page-title .bbp-title {
    font-size: 30px;
    margin: 0 0 4px;
}

/* ---------- Preloader: thin spinning ring instead of the black gear ---------- */
.preloader:before {
    background: rgba(255, 255, 255, .72) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23e6e3de" stroke-width="4"/><circle cx="25" cy="25" r="20" fill="none" stroke="%232c343a" stroke-width="4" stroke-linecap="round" stroke-dasharray="32 94"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/></circle><circle cx="25" cy="25" r="20" fill="none" stroke="%232ca82c" stroke-width="4" stroke-linecap="round" stroke-dasharray="10 116" stroke-dashoffset="-34"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/></circle></svg>') no-repeat center !important;
    background-size: 40px 40px !important;
    backdrop-filter: blur(2px);
    border-radius: inherit;
}

.list-files-uploaded.preloader:before {
    background-size: 26px 26px !important;
}

/* ---------- Icon-tile list (home): title + text + meta, hover shows "+" ---------- */
.bbp-list-section {
    margin: 30px 38px 0 0;
}

.bbp-divider-wide {
    margin: 0 0 22px;
}

.bbp-section-title {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 22px;
    color: var(--bbp-ink);
    margin: 0 0 10px;
}

.bbp-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

.bbp-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
    /* the class list may include .menu-button for its JS; neutralise its look */
    background: transparent;
    font-weight: normal;
    animation: none;
}

.bbp-item:hover {
    background: #f0f2f5;
    color: inherit;
}

.bbp-item .bbp-plus {
    display: none;
}

.bbp-item:hover .bbp-tile {
    background: #fff;
}

.bbp-item:hover .bbp-tile .bbp-icon {
    display: none;
}

.bbp-item:hover .bbp-plus {
    display: block;
}

.bbp-item-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.bbp-item-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--bbp-ink);
}

.bbp-item-text {
    font-size: 14px;
    line-height: 1.45;
    color: #50575c;
}

.bbp-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 12.5px;
    color: #80868b;
}

.bbp-item-meta .bbp-icon {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .bbp-list-section {
        margin-right: 0;
    }

    .bbp-items {
        grid-template-columns: 1fr;
    }
}

/* .bbp-item may carry .menu-button (for its JS): undo the theme's filled svgs and centred flex */
.bbp-item.menu-button {
    display: grid;
    align-items: start;
    padding: 12px;
    border-radius: 12px;
    color: inherit;
}

.bbp-item svg,
.bbp-item.menu-button svg {
    fill: none !important;
}

/* ---------- How it works: FAQ as an icon-tile list ---------- */
.bbp-works-head {
    margin: 18px 0 18px;
}

.page-works > p {
    font-size: 15px;
    line-height: 1.55;
    color: #50575c;
}

.page-works h3 {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 24px;
    margin: 34px 0 10px;
    padding-top: 22px;
    border-top: 2px dotted #dedad3;
}

.page-works .accordeon {
    display: grid;
    gap: 2px;
}

.page-works .accordeon-entry {
    position: relative;
    margin: 0 !important;
    padding: 12px 66px 12px 12px;
    border-radius: 12px;
    background: transparent;
    border: 0;
    transition: background .15s;
}

.page-works .accordeon-entry:hover {
    background: #f0f2f5;
}

.page-works .accordeon-entry::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--bbp-line);
    background: var(--bbp-tile) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233d4247" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>') no-repeat center / 20px 20px;
}

.page-works .accordeon-entry:hover::before {
    background-color: #fff;
}

.page-works .accordeon-title {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    cursor: default;
}

.page-works .accordeon-title::after,
.page-works .accordeon-title svg {
    display: none !important;
}

.page-works .accordeon-title strong {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--bbp-ink);
}

.page-works .accordeon-toggle {
    display: block !important;
    padding: 4px 0 0 !important;
    font-size: 14px;
    line-height: 1.5;
    color: #50575c;
}

.page-works .accordeon-title strong {
    font-weight: 600 !important;
}

.page-works .bbp-btn-light {
    display: inline-flex !important;
    width: auto !important;
}

/* ---------- Pricing cards ---------- */
.bbp-pricing {
    max-width: 760px;
    margin: 10px auto 40px;
}

.bbp-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 22px 0 30px;
}

.bbp-plan {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 16px;
    padding: 18px;
    transition: box-shadow .2s, transform .2s;
}

.bbp-plan:hover {
    box-shadow: 0 6px 20px rgba(16, 24, 40, .08);
    transform: translateY(-2px);
}

.bbp-plan.is-featured {
    border-color: #2c343a;
    box-shadow: 0 0 0 1px #2c343a inset;
}

.bbp-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bbp-badge {
    font-size: 12px;
    font-weight: 600;
    color: #1e7a1e;
    background: #e3f3fb;
    border-radius: 999px;
    padding: 4px 10px;
}

.bbp-plan-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--bbp-ink);
}

.bbp-plan-price {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.1;
    color: var(--bbp-ink);
}

.bbp-plan-points {
    font-size: 14px;
    color: #50575c;
}

/* «+ ПДВ» after the pack's price: PayPro adds the buyer's country tax at the checkout (2026-10-15) */
.bbp-plan-vat {
    font-size: 15px;
    font-weight: 500;
    color: #50575c;
    white-space: nowrap;
}

.bbp-plan-btn {
    margin-top: 14px;
    justify-content: center;
}

.bbp-items-one {
    grid-template-columns: 1fr;
}

.bbp-item-static {
    cursor: default;
}

.bbp-pricing-help {
    margin-top: 18px;
}

.bbp-pricing-help a {
    color: var(--bbp-ink);
    font-weight: 600;
}

@media (max-width: 767px) {
    .bbp-plans {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
 * Telegram-style side menus + warm panel background
 * ===================================================================== */
#aside-left,
#aside-left .wrap {
    background-color: #f6f4f0;
}

#aside-right {
    background-color: #fff;
}

.aside-menu a {
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 10px;
    gap: 0 5px;
    color: var(--bbp-ink);
    transition: background .15s;
}

.aside-menu a:hover {
    background: #f0f2f5;
}

.aside-menu a.active,
.aside-menu a.active:hover {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 6px rgba(16, 24, 40, .04);
}

.aside-menu a svg {
    fill: #3d4247;
}

/* unread counters as pills */
.aside-menu a .count {
    margin-right: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #229ed9;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aside-menu a .count::before {
    display: none;
}

/* account menu (settings / filters / balance / logout) */
#aside-left .foot ul {
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
}

#aside-left .foot ul li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--bbp-ink);
    font-size: 14px;
    transition: background .15s;
}

#aside-left .foot ul li a:hover,
#aside-left .foot ul li a.active {
    background: #f0f2f5;
}

#aside-left .foot ul li a svg {
    fill: #3d4247;
}

#aside-left .link-btn {
    background: #fff;
    border-color: var(--bbp-line);
    border-radius: 12px;
}

.aside-menu a .icon {
    margin-left: 7px;
}

/* logout is a form button: make it look like the other menu rows */
#aside-left .foot ul li button[type="submit"] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--bbp-ink);
    font: inherit;
    font-size: 14px;
    text-align: right;
    cursor: pointer;
    transition: background .15s;
}

#aside-left .foot ul li button[type="submit"]:hover {
    background: #f0f2f5;
}

#aside-left .foot ul li button[type="submit"] svg {
    fill: #3d4247;
}

/* ---------- Illustrated empty states ---------- */
.bbp-empty {
    max-width: 460px;
    margin: 40px auto 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bbp-empty-art {
    margin-bottom: 14px;
}

.bbp-empty-title {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 22px;
    color: var(--bbp-ink);
}

.bbp-empty-text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bbp-muted);
}

.bbp-empty-action {
    margin-top: 18px;
}

.bbp-empty-action .menu-button {
    animation: none;
}

/* ---------- Chat bubbles in Telegram colours ---------- */
.message .inner {
    background: #f4f2ee;
    color: var(--bbp-ink);
    border-radius: 14px;
}

.text-right .message .inner,
.request-body .text-right .message .inner {
    background: #e3f7d3;
    color: #1f2a1c;
    border-radius: 14px 14px 14px 4px;
}

.text-right .message .inner a {
    color: #2e7d32;
}

.text-right .message .date,
.text-right .message .inner .date,
.request-body .text-right .message .date {
    color: #5f9b5a;
}

.message .inner .date {
    color: #62676c;
}

/* service labels ("Шукаємо продавців", "Новий запит") as Telegram service pills */
.request-info {
    background: rgba(31, 35, 38, .06) !important;
    color: #50575c !important;
    box-shadow: none !important;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12.5px;
}

/* ---------- Hover only on real links/buttons: plain text blocks stay still ---------- */
.page-works .accordeon-entry:hover {
    background: transparent;
}

.page-works .accordeon-entry:hover::before {
    background-color: var(--bbp-tile);
}

.bbp-item-static:hover {
    background: transparent;
}

.bbp-item-static:hover .bbp-tile {
    background: var(--bbp-tile);
}

.bbp-plan:hover {
    box-shadow: none;
    transform: none;
}

.bbp-plan.is-featured:hover {
    box-shadow: 0 0 0 1px #2c343a inset;
}

.bbp-field:hover {
    background: transparent;
}

.bbp-field:hover .bbp-tile {
    background: var(--bbp-tile);
}

/* =====================================================================
 * Popups (login / registration): Telegram-like modal
 * ===================================================================== */
.popup-content .popup-container {
    border-radius: 18px !important;
    border: 0 !important;
    box-shadow: 0 20px 60px rgba(16, 24, 40, .18);
}

.popup-content .popup-title {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 22px;
    color: var(--bbp-ink);
}

.popup-content .form-group .input,
.popup-content input.input[type="text"],
.popup-content input.input[type="email"],
.popup-content input.input[type="password"],
.popup-content input.input[type="tel"],
.popup-content .input:not(textarea):not(select) {
    height: 46px;
    padding: 0 14px;
    border: 1px solid #e3e0da !important;
    border-radius: 10px !important;
    background: #fff;
    box-shadow: none;
    margin-bottom: 10px;
}

.popup-content .input:focus {
    border-color: #b9b4ab !important;
    outline: none;
}

.popup-content .popup-button {
    height: 46px;
    border-radius: 10px;
}

/* Google sign-in: calm outline button instead of a red block */
.popup-content a[href*="auth-google"],
.popup-content .btn-google,
.popup-content .google {
    background: #fff !important;
    color: var(--bbp-ink) !important;
    border: 1px solid #e3e0da !important;
    border-radius: 10px !important;
    font-weight: 600;
    text-transform: none;
}

.popup-content a[href*="auth-google"]:hover {
    background: #f0f2f5 !important;
}

/* role choice as selectable cards */
.switch-role {
    display: grid;
    gap: 8px;
    margin: 18px 0 6px;
}

.switch-role .input-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e3e0da;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.switch-role .input-checkbox:hover {
    background: #f0f2f5;
}

.switch-role .input-checkbox:has(input:checked) {
    border-color: var(--bbp-ink);
    box-shadow: 0 0 0 1px var(--bbp-ink) inset;
}

.popup-content .blabla-comment .text h4 {
    text-transform: none;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
}

/* =====================================================================
 * Settings: white cards with icon tiles
 * ===================================================================== */
.accordeon-settings .item-accordeon {
    background: #fff !important;
    border: 1px solid var(--bbp-line) !important;
    border-radius: 16px !important;
    box-shadow: none;
}

.accordeon-settings .btn-accordeon {
    display: flex;
    align-items: center;
    gap: 14px;
}

.accordeon-settings .btn-accordeon::before {
    content: "";
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--bbp-line);
    background: var(--bbp-tile) no-repeat center / 20px 20px;
}

.accordeon-settings .btn-accordeon > span {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--bbp-ink);
}

/* 1: contacts, 2: personal data, 3: password */
.accordeon-settings .item-accordeon:nth-child(1) .btn-accordeon::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233d4247" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg>');
}

.accordeon-settings .item-accordeon:nth-child(2) .btn-accordeon::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233d4247" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg>');
}

.accordeon-settings .item-accordeon:nth-child(3) .btn-accordeon::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233d4247" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>');
}

.accordeon-settings .input {
    border: 1px solid #e3e0da !important;
    border-radius: 10px !important;
}

/* =====================================================================
 * Right FAQ column: Telegram-like rows with hairline dividers
 * ===================================================================== */
#aside-right .item-accordeon {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #efece7 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 12px 2px !important;
}

#aside-right .btn-accordeon {
    color: var(--bbp-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

#aside-right .content-accordeon,
#aside-right .inner-accordeon {
    color: var(--bbp-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* =====================================================================
 * claude.com look: cream canvas, white cards, big serif headline
 * ===================================================================== */
body {
    background-color: #faf9f5;
}

.request-head #header,
#header {
    background-color: #faf9f5;
}

#aside-right {
    background-color: #faf9f5;
}

#aside-left,
#aside-left .wrap {
    background-color: #f3f1ea;
}

.bbp-hero h1 {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.bbp-hero p {
    font-size: 16px;
}

/* white surfaces keep contrast on the cream canvas */
.blabla-comment .text,
.bbp-plan,
.bbp-card,
.accordeon-settings .item-accordeon {
    background-color: #fff;
}

.bbp-item:hover {
    background: #f0f2f5;
}

@media (max-width: 991px) {
    .bbp-hero h1 {
        font-size: 30px;
    }
}

main#main,
#main {
    background-color: #faf9f5;
}

#aside-right section.faq,
section.faq {
    background-color: transparent;
}

/* home: text sits directly on the cream canvas, like a landing page */
.bbp-home .blabla-comment .text {
    background-color: transparent;
    padding-right: 0;
    padding-left: 0;
}

.bbp-home .blabla-comment .text::before,
.bbp-home .blabla-comment .text::after {
    display: none;
}

/* empty white circle next to "share": wrapper of a desktop-hidden close button */
.head-social {
    background: transparent !important;
    box-shadow: none !important;
}

/* =====================================================================
 * Legal pages (offer, privacy, refund): comfortable reading
 * ===================================================================== */
.page-contact .contract {
    max-width: 720px;
    font-size: 15px;
    line-height: 1.65;
    color: #3a4146;
}

.page-contact .contract h1,
.page-contact h1 {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2;
    color: var(--bbp-ink);
    margin: 6px 0 14px;
}

.page-contact .contract h2,
.page-contact .contract h3 {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 22px;
    color: var(--bbp-ink);
    margin: 30px 0 10px;
    padding-top: 20px;
    border-top: 2px dotted #dedad3;
}

.page-contact .contract ul,
.page-contact .contract ol {
    padding-right: 20px;
    margin: 8px 0 12px;
}

.page-contact .contract li {
    margin: 4px 0;
    padding-right: 0;
}

.page-contact .contract p {
    margin: 0 0 10px;
}

/* =====================================================================
 * Contact form
 * ===================================================================== */
.form-contact-ajax .input {
    width: 100%;
    height: auto;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #e3e0da !important;
    border-radius: 10px !important;
    background: #fff;
    box-shadow: none;
}

.form-contact-ajax .input:focus {
    border-color: #b9b4ab !important;
    outline: none;
}

.form-contact-ajax textarea.input {
    min-height: 140px;
}

.page-contact .popup-title,
.page-contact h2 {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 26px;
    color: var(--bbp-ink);
}

.form-contact-ajax .popup-button {
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
}

/* ---------- Auth pages (password reset): centred card like claude.com sign-in ---------- */
.bbp-auth {
    display: flex;
    justify-content: center;
    padding: 8vh 0 60px;
}

.bbp-auth-card {
    width: 100%;
    max-width: 440px;
    padding: 32px;
    border-radius: 20px;
    text-align: center;
}

.bbp-auth-icon {
    margin: 0 auto 14px;
}

.bbp-auth-card .bbp-title {
    font-size: 30px;
}

.bbp-auth-card .bbp-subtitle {
    margin-bottom: 20px;
}

.bbp-auth-field {
    margin-bottom: 12px;
    text-align: right;
}

.bbp-auth-field .input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 15px;
    border: 1px solid #e3e0da;
    border-radius: 10px;
    background: #fff;
}

.bbp-auth-field .input:focus {
    border-color: #b9b4ab;
    outline: none;
}

.bbp-auth-field .help-block {
    margin-top: 6px;
    font-size: 13px;
    color: #c0392b;
}

.bbp-auth-btn {
    width: 100%;
    justify-content: center;
    height: 46px;
}

.bbp-auth-note {
    margin: 16px 0 0;
    font-size: 12.5px;
    color: #80868b;
}

.page-contact > h5 {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 26px;
    color: var(--bbp-ink);
    margin: 4px 0 14px;
}

/* =====================================================================
 * Category mega-menu: claude.com panel + Telegram rows
 * ===================================================================== */
.nav:after {
    background: rgba(31, 35, 38, .32) !important;   /* no cartoon, softer dim */
    backdrop-filter: blur(2px);
}

.nav > .menu {
    border-radius: 0 18px 18px 0;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .18);
    border-left: 1px solid #efece7;
}

.nav .sub-menu {
    border-right: 1px solid #efece7;
    box-shadow: -12px 24px 40px rgba(16, 24, 40, .10);
}

.nav .inner {
    padding: 12px 0;
}

.nav a {
    margin: 2px 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--bbp-ink);
    gap: 12px;
    transition: background .15s;
}

.nav a:hover {
    background: #f0f2f5;
    color: var(--bbp-ink);
}

.nav a:focus,
.nav a:focus-visible {
    outline: none;
}

.nav .active > a,
.nav .active > a:hover {
    background: #f0f2f5;
    color: var(--bbp-ink);
    font-weight: 600;
}

/* thin chevron instead of a filled triangle */
.nav .icon > a:after,
.nav .active > a:after,
.nav .icon > a:hover:after,
.nav .active > a:hover:after {
    border: 0;
    width: 7px;
    height: 7px;
    margin-left: 4px;
    border-left: 1.75px solid #62676c;
    border-bottom: 1.75px solid #62676c;
    transform: rotate(45deg);
    flex: 0 0 auto;
}

.nav .active > a:after {
    border-color: var(--bbp-ink);
}

.bbp-cat-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--bbp-tile);
    border: 1px solid var(--bbp-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3d4247;
}

.nav .active > a .bbp-cat-icon {
    background: #fff;
}

.bbp-cat-name {
    flex: 1 1 auto;
    min-width: 0;
}

.sub-menu .back-menu {
    color: var(--bbp-ink);
    text-transform: none;
    font-weight: 600;
}

.sub-menu .back-menu:before {
    border: 0;
    width: 7px;
    height: 7px;
    border-right: 1.75px solid var(--bbp-ink);
    border-bottom: 1.75px solid var(--bbp-ink);
    transform: rotate(-45deg);
}

.nav .bbp-cat-icon svg,
.nav a .bbp-icon {
    fill: none !important;
}

.nav > .menu {
    border-radius: 18px;
}

.nav .sub-menu {
    border-radius: 18px 0 0 18px;
}

/* menu JS reads event.target.dataset.id / parentNode: clicks must land on the <a>, not on the inner spans */
.nav a > span,
.nav a > span *,
.nav a .bbp-icon {
    pointer-events: none;
}

/* =====================================================================
 * Search: white suggestion panel instead of the dark graphite list
 * ===================================================================== */
.header-search input:focus,
.header-search input:focus-visible {
    outline: none;
}

.header-search:focus-within {
    border-color: #cfcac1 !important;
    box-shadow: 0 0 0 3px rgba(31, 35, 38, .06);
    background: #fff;
}

.autocomplete {
    background: #fff !important;
    color: var(--bbp-ink) !important;
    border: 1px solid var(--bbp-line);
    border-radius: 14px !important;
    margin-top: 6px !important;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .14);
}

.autocomplete li + li {
    border-top: 0 !important;
}

.autocomplete li a {
    position: relative;
    color: var(--bbp-ink) !important;
    padding: 11px 44px 11px 14px !important;
    border-radius: 10px;
}

.autocomplete li a::before {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238a8f93" stroke-width="1.75" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>') no-repeat center / contain;
}

.autocomplete li a:hover {
    background: #f0f2f5 !important;
}

.autocomplete li a strong {
    color: var(--bbp-ink);
    background: #fdf1c7;
    border-radius: 3px;
    padding: 0 1px;
}

/* ---------- Sub-category picker ---------- */
.bbp-subcats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    padding: 8px;
}

.bbp-subcat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--bbp-ink);
    text-decoration: none;
    transition: background .15s;
}

.bbp-subcat:hover {
    background: #f0f2f5;
    color: var(--bbp-ink);
}

.bbp-subcat:hover .bbp-tile {
    background: #fff;
}

.bbp-subcat .bbp-tile {
    width: 36px;
    height: 36px;
}

.bbp-subcat-name {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 500;
}

.bbp-chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-left: 1.75px solid #62676c;
    border-bottom: 1.75px solid #62676c;
    transform: rotate(45deg);
    margin-left: 4px;
}

@media (max-width: 767px) {
    .bbp-subcats {
        grid-template-columns: 1fr;
    }
}

/* ---------- Offers popup (buyer): price, badge, no-reviews ---------- */
.bbp-offer-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 6px 0 4px;
}

.bbp-price {
    font-family: var(--bbp-serif);
    font-weight: 600;
    font-size: 24px;
    color: var(--bbp-ink);
}

.bbp-old-price {
    color: #62676c;
    font-size: 14px;
}

.bbp-no-reviews {
    font-size: 12.5px;
    color: #62676c;
    margin-right: 6px;
}

/* ---------- Share block: calm outline pills instead of grey slabs ---------- */
.share-chat {
    text-transform: none;
    font-weight: 600;
    color: var(--bbp-ink);
}

.share-chat p {
    font-size: 14px;
    margin-bottom: 10px;
}

.share-chat .share-button {
    width: auto !important;
    margin: 4px !important;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff !important;
    border: 1px solid #e3e0da !important;
    color: var(--bbp-ink) !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    justify-content: center;
}

.share-chat .share-button:hover {
    background: #f0f2f5 !important;
}

.share-chat .share-button {
    text-transform: capitalize;
}

.time-entry .days {
    margin: 0 4px;
    font-weight: 600;
}

/* ---------- Request popup chrome: header, actions menu, offer composer ---------- */
.popup-container.wide .request-head {
    background: #faf9f5;
    border-bottom: 1px solid var(--bbp-line);
}
.popup-container.wide .request-head .title {
    font-family: var(--bbp-serif);
    font-weight: 500;
    color: var(--bbp-ink);
    letter-spacing: -0.01em;
}
.popup-container.wide .request-head .close-popup-all {
    background: transparent;
    border: 1px solid var(--bbp-line);
    border-radius: 50%;
    transition: background .2s;
}
.popup-container.wide .request-head .close-popup-all:hover { background: #f0f2f5; }

/* "Твої дії" toggle: neutral outline pill instead of the blue one */
.drop-menu > a {
    background: #fff;
    color: var(--bbp-ink);
    border: 1px solid var(--bbp-line);
    padding: 4px 12px;
    height: auto;
    transition: background .2s, border-color .2s;
}
.drop-menu > a:hover { background: #f0f2f5; }
.drop-menu.active > a { background: var(--bbp-ink); border-color: var(--bbp-ink); color: #fff; }
.drop-menu > a svg { fill: currentColor; }

/* dropdown: white card with quiet line icons */
.drop-menu.active .drop,
.drop-menu .drop {
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(31, 35, 38, .08);
    padding: 4px;
}
.drop-menu .drop a {
    color: var(--bbp-ink);
    font-size: 14px;
    border-radius: 10px;
    margin: 0;
    padding: 9px 12px;
}
.drop-menu .drop a:hover { background: #f0f2f5; }
.drop-menu .drop a svg,
.drop-menu .drop a img { filter: grayscale(1) brightness(.45); opacity: .85; }
.drop-menu .drop a.js-spam { color: #c4432b; }
.drop-menu .drop a.js-spam svg,
.drop-menu .drop a.js-spam img { filter: none; opacity: 1; }
.drop-menu .drop a.js-spam:hover { background: #fbeee9; }

/* seller offer composer: bordered fields, ink send button */
.seller-order .input-group .input,
.seller-order .input-group textarea.input {
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 12px;
    color: var(--bbp-ink);
}
.seller-order .input-group .input:focus {
    border-color: #c9c4ba;
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 35, 38, .05);
}
.seller-order .input-group label.button.input-file {
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 12px;
}
.seller-order .input-group label.button.input-file:hover { background: #f0f2f5; }
.popup-send.blue,
.input-group .popup-send.blue { background: var(--bbp-ink); }
.popup-send.blue:hover { background: #3a4045; }
.popup-send.blue.no-active { background: #c9c6bf; }

/* ---------- Offer composer, Telegram-like: one bar, clip + price chip + message + round send ---------- */
.popup-container.wide .tab-answer .input-group.align-center {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 14px;
    background: #faf9f5;
    border-top: 1px solid var(--bbp-line);
}
.popup-container.wide .tab-answer .input-group .list-files-uploaded { flex: 0 0 auto; margin: 0; }
.popup-container.wide .tab-answer .input-group label.button.input-file {
    width: 44px; height: 44px; min-width: 44px;
    border: 0; border-radius: 50%;
    background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
}
.popup-container.wide .tab-answer .input-group label.button.input-file:hover { background: #f0f2f5; }
.popup-container.wide .tab-answer .input-group label.button.input-file svg { fill: #62676c; }
.popup-container.wide .tab-answer .input-group .input {
    height: 44px; min-height: 44px;
    margin: 0;
    padding: 11px 16px;
    font-size: 15px; line-height: 22px;
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 22px;
    box-shadow: none;
}
.popup-container.wide .tab-answer .input-group input.input {
    flex: 0 0 170px; width: 170px;
    font-weight: 600;
    -moz-appearance: textfield;
}
.popup-container.wide .tab-answer .input-group input.input::-webkit-outer-spin-button,
.popup-container.wide .tab-answer .input-group input.input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.popup-container.wide .tab-answer .input-group textarea.input {
    flex: 1 1 auto; width: auto;
    resize: none; overflow-y: auto;
    max-height: 140px;
    field-sizing: content;
}
.popup-container.wide .tab-answer .input-group .input::placeholder { color: #9a9ea3; font-weight: 400; }
.popup-container.wide .tab-answer .input-group .input:focus { border-color: #cfcac0; box-shadow: none; }
.popup-container.wide .tab-answer .input-group .popup-send {
    position: static;
    flex: 0 0 44px;
    width: 44px; height: 44px; min-width: 44px;
    margin: 0;
    border-radius: 50%;
    background: var(--bbp-ink);
    transition: background .2s, transform .15s;
}
.popup-container.wide .tab-answer .input-group .popup-send svg { fill: #fff; margin-right: 2px; }
.popup-container.wide .tab-answer .input-group .popup-send.no-active { background: #d6d3cc; }
.popup-container.wide .tab-answer .input-group .popup-send:not(.no-active):hover { background: #3a4045; transform: scale(1.04); }
@media (max-width: 640px) {
    .popup-container.wide .tab-answer .input-group.align-center { flex-wrap: wrap; padding: 8px 10px; }
    .popup-container.wide .tab-answer .input-group input.input { flex: 1 1 calc(100% - 52px); width: auto; }
    .popup-container.wide .tab-answer .input-group textarea.input { flex: 1 1 calc(100% - 52px); }
}
.popup-container.wide .tab-answer .input-group .input { border-radius: 22px !important; }
.popup-container.wide .tab-answer .input-group .popup-send,
.popup-container.wide .tab-answer .input-group label.button.input-file { border-radius: 50% !important; }
.name-reviews .bbp-no-reviews { margin-right: 8px; font-size: 12px; color: #62676c; font-weight: 400; }

/* ---------- Chat popups, Telegram-like ---------- */
/* price inside a message bubble */
.message .bbp-msg-price {
    font-family: var(--bbp-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 4px 0 2px;
    color: inherit;
}

/* own messages sit on the right, text inside stays left-aligned */
.request-body .text-right .message {
    display: flex;
    justify-content: flex-end;
    padding-right: 18%;
}
.request-body .text-right .message .box { justify-content: flex-end; }
.request-body .text-right .message .inner { text-align: right; border-radius: 16px 16px 16px 4px; }

/* service (bot) messages: grey incoming bubbles, grouped like consecutive Telegram messages */
.popup-container.wide .blabla-comment .text {
    display: inline-block;
    max-width: 520px;
    background-color: #f4f2ee;
    color: var(--bbp-ink);
    padding: 9px 14px;
    border-radius: 16px 16px 4px 16px;
    font-size: 14.5px;
    line-height: 1.45;
    box-shadow: none;
}
.popup-container.wide .blabla-comment .text p { margin: 0; }
.popup-container.wide .blabla-comment .text::before,
.popup-container.wide .blabla-comment .text::after { display: none; }
.popup-container.wide .blabla-comment.first .text { border-radius: 16px 16px 4px 16px; }
.popup-container.wide .blabla-comment.middle .text { border-radius: 16px 4px 4px 16px; }
.popup-container.wide .blabla-comment.last .text { border-radius: 16px 4px 16px 16px; }
.popup-container.wide .blabla-comment.not-first { margin-top: 0; }
.popup-container.wide .blabla-comment.first:not(.last) { margin-bottom: 3px; }
.popup-container.wide .blabla-comment.middle { margin-bottom: 3px; }
.popup-container.wide .blabla-comment .text strong { font-weight: 600; }

/* ---------- Review composer (after contacts exchange): rating chips + message + send ---------- */
.popup-container.wide .request-foot .form-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    background: #faf9f5;
    border-top: 1px solid var(--bbp-line);
}
.popup-container.wide .request-foot .button-reviews { flex: 1 0 100%; gap: 6px; }
.popup-container.wide .request-foot .button-reviews button {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 8px 0 12px;
    line-height: 1;
    font-size: 13px; color: var(--bbp-ink);
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 16px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.popup-container.wide .request-foot .button-reviews button svg { width: 18px; height: 18px; }
.popup-container.wide .request-foot .button-reviews button:hover { background: #f0f2f5; }
.popup-container.wide .request-foot .button-reviews button:hover svg { transform: none; }
/* selected chip; "positive" is the preselected default (hidden input starts at RATING_GOOD) */
.popup-container.wide .request-foot form:not(.neutral):not(.negative) .button-reviews button[value="2"],
.popup-container.wide .request-foot form.position .button-reviews button[value="2"] { background: #e3f3fb; border-color: #b4def2; }
.popup-container.wide .request-foot form.neutral .button-reviews button[value="1"] { background: #fbf1d6; border-color: #ecd9a0; }
.popup-container.wide .request-foot form.negative .button-reviews button[value="0"] { background: #fbe6e1; border-color: #efbfb4; }
.popup-container.wide .request-foot .input-reviews { flex: 1 1 auto; position: relative; margin: 0; }
.popup-container.wide .request-foot .input-reviews .text { display: none; }
.popup-container.wide .request-foot .input-reviews .input {
    width: 100%;
    min-height: 44px; max-height: 140px;
    margin: 0;
    padding: 11px 16px;
    font-size: 15px; line-height: 22px;
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 22px !important;
    resize: none;
    field-sizing: content;
}
.popup-container.wide .request-foot .input-reviews .input:focus { border-color: #cfcac0; outline: none; }
.popup-container.wide .request-foot .form-wrap .popup-send {
    position: static;
    flex: 0 0 44px;
    width: 44px; height: 44px; min-width: 44px;
    margin: 0;
    border-radius: 50% !important;
    background: var(--bbp-ink);
}
.popup-container.wide .request-foot .form-wrap .popup-send svg { fill: #fff; margin-right: 2px; }

/* contacts in a bubble are tappable */
.message .phone a,
.message .email a { color: inherit; text-decoration: underline; text-decoration-color: rgba(31, 35, 38, .3); text-underline-offset: 3px; }
.message .phone a:hover,
.message .email a:hover { text-decoration-color: currentColor; }
.popup-container.wide .request-foot .input-reviews { flex: 1 1 0; min-width: 0; }
.request-body .message .phone a,
.request-body .message .email a { color: var(--bbp-ink); }
.popup-container.wide .request-foot { background: #faf9f5; }

/* ---------- Refuse / delete-chat form: reason chip + "other" field + send ---------- */
.popup-container.wide .tab-spam .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    background: #faf9f5;
    border-top: 1px solid var(--bbp-line);
}
.popup-container.wide .tab-spam label.input-radio {
    flex: 1 0 100%;
    display: flex; align-items: center; gap: 8px;
    margin: 0;
}
.popup-container.wide .tab-spam label.input-radio span {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 10px 0 14px;
    font-size: 13px; color: var(--bbp-ink);
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 16px;
    cursor: pointer;
}
.popup-container.wide .tab-spam label.input-radio span::before {
    content: ""; width: 12px; height: 12px; border-radius: 50%;
    border: 1.5px solid #b9b5ad; box-sizing: border-box;
}
.popup-container.wide .tab-spam label.input-radio .radio { display: none; }
.popup-container.wide .tab-spam label.input-radio input:checked ~ span { background: #fbeee9; border-color: #efc4b8; color: #b23a22; }
.popup-container.wide .tab-spam label.input-radio input:checked ~ span::before { border: 4px solid #c4432b; }
.popup-container.wide .tab-spam label.label-comment { flex: 1 1 0; min-width: 0; margin: 0; }
.popup-container.wide .tab-spam label.label-comment .input {
    width: 100%;
    min-height: 44px; max-height: 140px;
    margin: 0;
    padding: 11px 16px;
    font-size: 15px; line-height: 22px;
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 22px !important;
    resize: none;
    field-sizing: content;
}
.popup-container.wide .tab-spam label.label-comment .input:focus { border-color: #cfcac0; outline: none; }
.popup-container.wide .tab-spam .popup-send {
    position: static;
    flex: 0 0 44px;
    width: 44px; height: 44px; min-width: 44px;
    margin: 0;
    border-radius: 50% !important;
    background: var(--bbp-ink);
}
.popup-container.wide .tab-spam .popup-send svg { fill: #fff; margin-right: 2px; }

/* ---------- BlaBlaPrice as an AI assistant: people talk in bubbles, the assistant answers in plain prose ---------- */
.popup-container.wide .blabla-comment .text,
.popup-container.wide .blabla-comment.first .text,
.popup-container.wide .blabla-comment.middle .text,
.popup-container.wide .blabla-comment.last .text {
    display: block;
    max-width: 560px;
    background: transparent;
    border-radius: 0;
    padding: 0 2px 0 0;
    font-family: var(--bbp-serif);
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--bbp-ink);
}
.popup-container.wide .blabla-comment .text strong { font-weight: 600; }
.popup-container.wide .blabla-comment:not(.not-first) .text::before {
    content: "BlaBlaPrice";
    display: block !important;
    position: static;
    margin: 0 0 2px;
    border: 0;
    width: auto; height: auto;
    background: none;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
    color: #62676c;
}
.popup-container.wide .blabla-comment.not-first { margin-top: 0; }
.popup-container.wide .blabla-comment.first:not(.last),
.popup-container.wide .blabla-comment.middle { margin-bottom: 8px; }
/* the logo mark sits on the first line of the assistant's reply only */
.popup-container.wide .blabla-comment.not-first > :not(.text) { visibility: hidden; }
/* a whole message wrapped in <strong> reads as normal prose; bold stays for inline emphasis */
.popup-container.wide .blabla-comment .text > strong { font-weight: 400; }
.popup-container.wide .blabla-comment .text h4 { font: inherit; font-weight: 400; margin: 0; color: inherit; }
.popup-container.wide .blabla-comment .text,
.popup-container.wide .blabla-comment.dark .text { font-weight: 400; }

/* assistant prose in cabinet request cards too (same voice as in the chat popup) */
#main > .center > .blabla-comment .text,
.request.open-popup .blabla-comment .text {
    display: block;
    background: transparent;
    border-radius: 0;
    padding: 0 2px 0 0;
    box-shadow: none;
    font-family: var(--bbp-serif);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bbp-ink);
}
.request.open-popup .blabla-comment .text strong { font-weight: 600; }
#main > .center > .blabla-comment .text::after,
.request.open-popup .blabla-comment .text::after { display: none; }
#main > .center > .blabla-comment .text::before,
.request.open-popup .blabla-comment .text::before {
    content: "BlaBlaPrice";
    display: block !important;
    position: static;
    margin: 0 0 2px;
    border: 0;
    width: auto; height: auto;
    background: none;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
    color: #62676c;
}

/* ---------- Chat rhythm: one spacing scale for pills, bubbles and text inside them ---------- */
/* date/section pills */
.request-body .request-info {
    margin: 26px auto 10px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #5c6166;
    background: rgba(31, 35, 38, .055);
    border-radius: 12px;
}
.request-body .request-info:first-child { margin-top: 8px; }

/* bubbles */
.request-body .message .inner {
    max-width: 500px;
    margin: 4px 0;
    padding: 9px 14px 7px;
    font-size: 14.5px;
    line-height: 1.45;
    border-radius: 18px 4px 18px 18px; /* avatar sits at the top-left, so that corner is the "tail" */
}
.request-body .text-right .message .inner { border-radius: 18px 18px 18px 4px; }
.request-body .message .avatar { margin-top: 4px; margin-left: 8px; }
.request-body .message .inner > * { margin-top: 0; margin-bottom: 0; }
.request-body .message .inner > * + * { margin-top: 3px; }
.request-body .message .name-reviews { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; font-size: 13.5px; }
.request-body .message .name-reviews strong { font-weight: 600; }
.request-body .message .name-reviews .bbp-no-reviews { margin-right: 0; font-size: 11.5px; }
.request-body .message .bbp-msg-price { margin-top: 2px; margin-bottom: 0; }
.request-body .message .deadline { margin-top: 6px; }
.request-body .message .contacts:empty { display: none; }
.request-body .message .inner .date {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.2;
    text-align: left;
    color: rgba(31, 35, 38, .45);
}
.request-body .text-right .message .inner .date { color: rgba(46, 110, 40, .6); }

/* assistant prose between bubbles */
.popup-container.wide .blabla-comment { margin-top: 22px; margin-bottom: 6px; }
.popup-container.wide .blabla-comment.not-first { margin-top: 0; }
.popup-container.wide .blabla-comment .text br + br { content: ""; display: block; margin-top: 8px; }
.popup-container.wide .blabla-comment .text p + p { margin-top: 8px; }

/* =====================================================================
 * Composers in the Claude.ai style: one white card, text on top,
 * a quiet row of controls underneath (attach / price or chips / send)
 * ===================================================================== */
.popup-container.wide .tab-answer .input-group.align-center,
.popup-container.wide .request-foot .form-wrap,
.popup-container.wide .tab-spam .input-group {
    display: grid;
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    width: calc(100% - 32px);
    max-width: 760px;
    margin: 8px auto 16px;
    padding: 12px 16px 10px 12px;
    background: #fff;
    border: 1px solid #e3e0d8;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(31, 35, 38, .05);
    transition: border-color .2s, box-shadow .2s;
}
.popup-container.wide .tab-answer .input-group.align-center:focus-within,
.popup-container.wide .request-foot .form-wrap:focus-within,
.popup-container.wide .tab-spam .input-group:focus-within {
    border-color: #cfcbc1;
    box-shadow: 0 6px 24px rgba(31, 35, 38, .08);
}
/* the bars around the cards become plain */
.popup-container.wide .request-foot,
.popup-container.wide .tab-answer,
.popup-container.wide .tab-spam { background: #fff; border-top: 0; }

/* offer: text on top; attach, price, send underneath */
.popup-container.wide .tab-answer .input-group.align-center {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "text text text text" "attach price . send";
}
.popup-container.wide .tab-answer .input-group .list-files-uploaded { grid-area: attach; }
.popup-container.wide .tab-answer .input-group input.input { grid-area: price; }
.popup-container.wide .tab-answer .input-group textarea.input { grid-area: text; }
.popup-container.wide .tab-answer .input-group .popup-send { grid-area: send; }

/* review: text on top; rating chips, send underneath */
.popup-container.wide .request-foot .form-wrap {
    grid-template-columns: 1fr auto;
    grid-template-areas: "text text" "chips send";
}
.popup-container.wide .request-foot .form-wrap .button-reviews { grid-area: chips; flex: none; }
.popup-container.wide .request-foot .form-wrap .input-reviews { grid-area: text; }
.popup-container.wide .request-foot .form-wrap .popup-send { grid-area: send; }

/* refuse: text on top; reason chip, send underneath */
.popup-container.wide .tab-spam .input-group {
    grid-template-columns: 1fr auto;
    grid-template-areas: "text text" "chip send";
}
.popup-container.wide .tab-spam label.input-radio { grid-area: chip; flex: none; }
.popup-container.wide .tab-spam label.label-comment { grid-area: text; }
.popup-container.wide .tab-spam .popup-send { grid-area: send; }

/* the message field itself: borderless, grows with the text */
.popup-container.wide .tab-answer .input-group textarea.input,
.popup-container.wide .request-foot .input-reviews .input,
.popup-container.wide .tab-spam label.label-comment .input {
    width: 100%;
    min-height: 48px;
    max-height: 220px;
    height: auto;
    margin: 0;
    padding: 2px 2px 4px;
    font-size: 15.5px;
    line-height: 1.5;
    background: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
    resize: none;
    field-sizing: content;
}

/* price as a small pill in the control row */
.popup-container.wide .tab-answer .input-group input.input {
    width: 170px;
    height: 34px;
    min-height: 34px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 17px !important;
}

/* round quiet attach, compact send */
.popup-container.wide .tab-answer .input-group label.button.input-file { width: 34px; height: 34px; min-width: 34px; }
.popup-container.wide .tab-answer .input-group .popup-send,
.popup-container.wide .request-foot .form-wrap .popup-send,
.popup-container.wide .tab-spam .popup-send {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 12px !important;
}
.popup-container.wide .tab-answer .input-group .popup-send svg,
.popup-container.wide .request-foot .form-wrap .popup-send svg,
.popup-container.wide .tab-spam .popup-send svg { width: 16px; height: 13px; }

@media (max-width: 640px) {
    .popup-container.wide .tab-answer .input-group.align-center,
    .popup-container.wide .request-foot .form-wrap,
    .popup-container.wide .tab-spam .input-group { width: calc(100% - 16px); margin: 6px auto 8px; padding: 10px 12px 8px 10px; }
    .popup-container.wide .tab-answer .input-group input.input { width: 130px; }
    .popup-container.wide .request-foot .button-reviews button span { display: none; }
    .popup-container.wide .request-foot .button-reviews button { padding: 0 8px; }
}
.popup-container.wide .request-body { border-bottom: 0; }
/* a whole assistant message wrapped in <strong> reads as normal prose */
.popup-container.wide .blabla-comment .text > strong:only-child,
.popup-container.wide .blabla-comment .text p > strong:only-child { font-weight: 400; }
.popup-container.wide .blabla-comment .text > strong:only-child,
.popup-container.wide .blabla-comment .text p > strong:only-child { font-weight: 400 !important; }
@media (max-width: 640px) {
    .popup-container.wide .tab-answer .input-group input.input { width: 158px; padding: 0 12px; font-size: 13px; background: #fff; }
}

/* composer card is centred: the tabs wrapper had a 20px left padding */
.popup-container.wide .tabs-block { padding-right: 0; }

/* ---------- Two-step offer composer (see js/bbp-composer.js) ---------- */
/* step 1: the field asks only for the price */
.popup-container.wide .tab-answer .input-group.bbp-steps {
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-areas: "price price price price price" "attach . . . send";
}
.popup-container.wide .tab-answer .input-group.bbp-steps textarea.input,
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-price-cur { display: none; }
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) input.input {
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 2px 2px 4px;
    font-size: 18px;
    font-weight: 600;
    background: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
}
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) input.input::placeholder { font-size: 15.5px; font-weight: 400; }
/* the send button works as "next" on step 1: grey until a price is typed */
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) .popup-send {
    pointer-events: auto;
    opacity: 1;
    background: #d6d3cc;
}
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-ready:not(.bbp-step-comment) .popup-send { background: var(--bbp-ink); }

/* step 2: comment in the field, price as a pill with its currency in the control row */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment {
    grid-template-areas: "text text text text text" "attach price cur . send" "hint hint hint hint hint";
}
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment textarea.input { display: block; grid-area: text; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment input.input {
    width: 130px;
    font-weight: 600;
}
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment .bbp-price-cur {
    display: inline;
    grid-area: cur;
    font-size: 13px;
    color: #62676c;
}
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment.bbp-ready .popup-send { background: var(--bbp-ink); opacity: 1; pointer-events: auto; }
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-composer-hint {
    grid-area: hint;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #62676c;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-composer-hint a { color: var(--bbp-ink); text-decoration: underline; text-underline-offset: 2px; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment textarea.input { height: auto; min-height: 48px !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment .bbp-price-cur { margin-right: -2px; }
/* step 1 owns the whole field on every screen size (old mobile rules gave it a grey box) */
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) input.input { width: 100% !important; background: transparent !important; }
/* comment starts at one line; bbp-composer.js grows it with the text */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment textarea.input { height: 48px; overflow-y: hidden; }

/* two-step composer, revised: price -> "+ коментар" appears -> typing a comment -> send appears */
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-add-comment { display: none; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-ready:not(.bbp-step-comment) .bbp-add-comment {
    display: inline-flex;
    align-items: center;
    grid-area: send;
    height: 36px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--bbp-ink);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    animation: bbpPop .18s ease-out;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-add-comment:hover { background: #3a4045; }
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) .popup-send,
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(.bbp-has-comment) .popup-send { display: none; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment.bbp-has-comment .popup-send {
    display: inline-flex;
    background: var(--bbp-ink);
    opacity: 1;
    pointer-events: auto;
    animation: bbpPop .18s ease-out;
}
@keyframes bbpPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* step 2, revised: the price leaves the control row and sits as a chip above the comment */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment {
    grid-template-areas: "chip chip chip chip chip" "text text text text text" "attach . . . send" "hint hint hint hint hint";
}
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment input.input,
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment .bbp-price-cur { display: none; }
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-price-chip { display: none; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment .bbp-price-chip {
    grid-area: chip;
    justify-self: start;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    padding: 5px 12px;
    font-size: 13px;
    line-height: 1.3;
    color: #5c6166;
    background: #f3f1ec;
    border: 1px solid var(--bbp-line);
    border-radius: 12px;
    cursor: pointer;
    animation: bbpPop .18s ease-out;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-price-chip b { font-size: 14px; font-weight: 600; color: var(--bbp-ink); white-space: nowrap; }
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-price-chip .bbp-chip-edit { text-decoration: underline; text-underline-offset: 2px; }
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-price-chip:hover { background: #f0f2f5; }

/* attached photos sit on top of the composer (like attachments in Claude), next to the price chip.
   display: contents keeps the site's upload JS working: it still finds .list-files-uploaded .wrap */
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded { display: contents; }
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded label.input-file { grid-area: attach; justify-self: start; }
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded .wrap {
    grid-area: files;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded .wrap:empty { display: none; }
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) {
    grid-template-areas: "files files files files files" "price price price price price" "attach . . . send";
}
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment {
    grid-template-areas: "chip files files files files" "text text text text text" "attach . . . send" "hint hint hint hint hint";
}

/* thumbnail with a small remove button in the corner */
.popup-container.wide .tab-answer .item-file { position: relative; width: 52px; height: 52px; margin: 4px 0 0 4px; }
.popup-container.wide .tab-answer .item-file .img,
.popup-container.wide .tab-answer .item-file .img a { display: block; width: 100%; height: 100%; }
.popup-container.wide .tab-answer .item-file img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--bbp-line);
}
.popup-container.wide .tab-answer .item-file .delete {
    position: absolute;
    top: -6px;
    left: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(31, 35, 38, .12);
    cursor: pointer;
}
.popup-container.wide .tab-answer .item-file .delete svg { width: 10px; height: 10px; fill: #5c6166; }
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded label.input-file { margin: 0 !important; }
/* the remove button was hover-only, which phones never get */
.popup-container.wide .tab-answer .item-file .delete { opacity: 1 !important; visibility: visible; }
.popup-container.wide .tab-answer .item-file .delete { z-index: 2; transform: none !important; }

/* a quiet, inactive send icon holds the spot until there is something to send (like Claude's grey arrow) */
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment):not(.bbp-ready) .popup-send,
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(.bbp-has-comment) .popup-send {
    display: inline-flex;
    background: #efece5;
    opacity: 1;
    pointer-events: none;
    animation: none;
}
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment):not(.bbp-ready) .popup-send svg,
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(.bbp-has-comment) .popup-send svg { fill: #b3afa6; }

/* step 1: "грн" follows the digits while typing (positioned by bbp-composer.js) */
.popup-container.wide .tab-answer .input-group.bbp-steps { position: relative; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-has-price:not(.bbp-step-comment) .bbp-price-cur {
    display: flex;
    align-items: center;
    position: absolute;
    padding-bottom: 2px;
    font-size: 18px;
    font-weight: 600;
    color: #62676c;
    pointer-events: none;
}

/* =====================================================================
 * Offer composer, Claude layout: the card holds only the text and one icon;
 * "Додати фото" and the phone tip sit on a quiet row under the card.
 * The card itself is the container's ::before, placed over the first two grid rows.
 * ===================================================================== */
.popup-container.wide .tab-answer .input-group.bbp-steps,
.popup-container.wide .tab-answer .input-group.bbp-steps:focus-within {
    grid-template-columns: auto 1fr auto;
    row-gap: 0;
    column-gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) {
    grid-template-areas: "files files files" "price price icon" "attach hint hint";
}
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment {
    grid-template-areas: "chip files files" "text text icon" "attach hint hint";
}
.popup-container.wide .tab-answer .input-group.bbp-steps::before {
    content: "";
    grid-row: 1 / 3;
    grid-column: 1 / -1;
    z-index: 0;
    background: #fff;
    border: 1px solid #e3e0d8;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(31, 35, 38, .05);
    transition: border-color .2s, box-shadow .2s;
}
.popup-container.wide .tab-answer .input-group.bbp-steps:focus-within::before { border-color: #cfcbc1; box-shadow: 0 6px 24px rgba(31, 35, 38, .08); }
.popup-container.wide .tab-answer .input-group.bbp-steps > * { position: relative; z-index: 1; }

/* inside the card */
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded .wrap { margin: 12px 14px 0; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment .bbp-price-chip { margin: 12px 14px 0 0; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment .list-files-uploaded .wrap { margin-right: 0; }
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) input.input { grid-area: price; margin: 8px 16px 8px 0 !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment textarea.input { margin: 8px 16px 8px 0; }
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-add-comment,
.popup-container.wide .tab-answer .input-group.bbp-steps .popup-send { grid-area: icon; align-self: end; margin: 0 0 12px 10px; }

/* one icon on the right: return arrow = add a comment, paper plane = send; grey when there is nothing to do */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-ready:not(.bbp-step-comment) .bbp-add-comment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #fff;
    background: var(--bbp-ink);
    border-radius: 10px;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .popup-send,
.popup-container.wide .tab-answer .input-group.bbp-steps .popup-send.blue { width: 34px; height: 34px; min-width: 34px; border-radius: 10px !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment):not(.bbp-ready) .popup-send,
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(.bbp-has-comment) .popup-send { background: transparent; }

/* under the card: add photo + phone tip, small and grey like the footer row in Claude */
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded label.input-file {
    grid-area: attach;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: 30px;
    min-width: 0;
    margin: 8px 6px 0 0 !important;
    padding: 0 6px 0 10px;
    font-size: 13px;
    color: #5c6166;
    background: transparent;
    border: 0;
    border-radius: 15px !important;
    cursor: pointer;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded label.input-file::after { content: "Додати фото"; }
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded label.input-file svg { width: 18px; height: 18px; }
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded label.input-file:hover { background: #f0f2f5; }
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-composer-hint {
    grid-area: hint;
    align-self: center;
    justify-self: end;
    margin: 8px 0 0 8px;
    font-size: 12.5px;
    color: #62676c;
    text-align: left;
}
@media (max-width: 640px) {
    .popup-container.wide .tab-answer .input-group.bbp-steps .bbp-composer-hint { font-size: 12px; }
}
/* the theme already uses .input-group::before as a 1px line: reset it into the card */
.popup-container.wide .tab-answer .input-group.bbp-steps::before {
    position: relative;
    display: block;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    width: auto;
    height: auto;
    min-height: 56px;
    margin: 0;
    opacity: 1;
    transform: none;
}
/* the older "send" area no longer exists in this layout */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-ready:not(.bbp-step-comment) .bbp-add-comment { grid-area: icon; margin: 0 0 12px 10px; }
/* the container centres items vertically; the card must fill its two rows */
.popup-container.wide .tab-answer .input-group.bbp-steps::before { align-self: stretch; justify-self: stretch; }
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-composer-hint a { font-size: inherit; line-height: inherit; }
/* phones: the tip gets its own line under "Додати фото" */
@media (max-width: 640px) {
    .popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) {
        grid-template-areas: "files files files" "price price icon" "attach attach attach" "hint hint hint";
    }
    .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment {
        grid-template-areas: "chip files files" "text text icon" "attach attach attach" "hint hint hint";
    }
    .popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded label.input-file { justify-self: start; }
    .popup-container.wide .tab-answer .input-group.bbp-steps .bbp-composer-hint { justify-self: start; margin: 2px 12px 0 0; text-align: right; }
}
@media (max-width: 640px) { .popup-container.wide .tab-answer .input-group.bbp-steps .bbp-composer-hint { padding-right: 12px; } }
/* "+ коментар" is a compact text button in the icon slot */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-ready:not(.bbp-step-comment) .bbp-add-comment {
    width: auto;
    padding: 0 12px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* =====================================================================
 * Chat in the Claude palette:
 * cream canvas, own messages in a beige bubble, the other side as plain text,
 * BlaBlaPrice as serif prose, a white composer card.
 * ===================================================================== */
.popup-container.wide,
.popup-container.wide .request-body,
.popup-container.wide .tabs-block,
.popup-container.wide .tab-answer,
.popup-container.wide .tab-spam,
.popup-container.wide .tab-share,
.popup-container.wide .request-foot { background-color: #faf9f5; }
/* no wallpaper pattern behind the chat */
.popup-container.wide .request-body:before { display: none; }

/* own messages: beige bubble on the right */
.request-body .text-right .message .inner,
.request-body .text-right .message .inner.bbp-mine {
    background: #f0eee6;
    color: var(--bbp-ink);
    box-shadow: none;
}
.request-body .text-right .message .inner .date { color: rgba(31, 35, 38, .45); }

/* the other person: plain text next to the avatar, no bubble */
.request-body :not(.text-right) > .message .inner {
    background: transparent;
    box-shadow: none;
    padding: 2px 0 4px;
    border-radius: 0;
}
.request-body :not(.text-right) > .message .inner::before,
.request-body :not(.text-right) > .message .inner::after { display: none; }
.request-body :not(.text-right) > .message .inner .date { text-align: right; }

/* BlaBlaPrice logo: no white disc behind it */
.blabla-comment::before,
.blabla-comment:before { background-color: transparent !important; box-shadow: none !important; }

/* edit-offer popup: the existing photo sits on top with new uploads */
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded .gallery-offer {
    grid-area: files;
    display: flex;
    gap: 8px;
    margin: 12px 0 0 14px;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded label.input-file img.postImg { display: none; }
.popup-container.wide .tab-answer .input-group.bbp-steps textarea.input { min-width: 0; }

/* own bubble exactly like Claude: beige, evenly rounded, no tail, no own name inside, time below it */
.request-body .text-right .message .inner {
    position: relative;
    padding: 10px 16px;
    margin-bottom: 28px;
    border-radius: 16px !important;
}
.request-body .text-right .message .inner::before,
.request-body .text-right .message .inner::after { display: none; }
.request-body .text-right .message .inner .name-reviews { display: none; }
.request-body .text-right .message .inner > .bbp-msg-price:first-of-type { margin-top: 0; }
.request-body .text-right .message .inner .date {
    position: absolute;
    top: 100%;
    left: 4px;
    margin-top: 6px;
    font-size: 12px;
    color: #62676c;
    white-space: nowrap;
}
/* photos inside messages: a proper thumbnail instead of a tiny strip */
.request-body .message .inner img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(31, 35, 38, .06);
}
/* the wrappers around a message photo had a fixed narrow size */
.request-body .message .inner *:has(> img),
.request-body .message .inner *:has(> a > img) { width: auto !important; height: auto !important; overflow: visible; margin: 6px 0 0; padding: 0; }

/* own messages nested one level deeper (cabinet cards wrap message.php in .text-right):
   the doubled class outranks the "other person, no bubble" rule */
.request-body .text-right .message .inner.inner {
    background: #f0eee6;
    padding: 10px 16px;
    border-radius: 16px !important;
    box-shadow: none;
}
.request-body .text-right .message .inner.inner .date { text-align: left; }

/* call to action inside a request card (the whole card opens the chat) */
.bbp-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
    padding: 4px 12px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    background: var(--bbp-ink);
    border-radius: 14px;
    vertical-align: 1px;
    transition: background .2s;
}
.request.open-popup:hover .bbp-card-cta { background: #3a4045; }

/* request status pills: "searching" is quiet with a pulsing dot, "has offers" is green with a check */
.request-body .request-info.bbp-status {
    display: flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    padding: 4px 10px 4px 12px;
    font-weight: 600;
}
.bbp-status .bbp-status-icon { position: relative; width: 8px; height: 8px; border-radius: 50%; flex: none; }

.request-body .request-info.bbp-status-wait { color: #5c6166; background: rgba(31, 35, 38, .055); }
.bbp-status-wait .bbp-status-icon { background: #c9a227; }
.bbp-status-wait .bbp-status-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #c9a227;
    animation: bbpPulse 1.8s ease-out infinite;
}
@keyframes bbpPulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }

.request-body .request-info.bbp-status-offers { color: #13719f; background: #e3f3fb; }
.bbp-status-offers .bbp-status-icon {
    width: 14px;
    height: 14px;
    background: #229ed9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

@media (prefers-reduced-motion: reduce) { .bbp-status-wait .bbp-status-icon::after { animation: none; } }
/* card styles outrank the status pill: pin its casing and colours */
.request .request-body .request-info.bbp-status { text-transform: none !important; font-size: 12.5px; }
.request .request-body .request-info.bbp-status-wait { color: #5c6166 !important; background: rgba(31, 35, 38, .055) !important; }
.request .request-body .request-info.bbp-status-offers { color: #13719f !important; background: #e3f3fb !important; }

/* own bubble colour (user's choice) */
.request-body .text-right .message .inner,
.request-body .text-right .message .inner.inner { background: #edece9; }

/* UA chat popups: no section pills between messages; the status lives in the header subtitle */
html[lang="ua"] .popup-container.wide .request-body .request-info { display: none; }
html[lang="ua"] .popup-container.wide .request-body .request-body_inner > .message:first-child,
html[lang="ua"] .popup-container.wide .request-body .request-body_inner > div:first-child { margin-top: 8px; }
.popup-container.wide .request-head .from {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    font-size: 12.5px;
    color: #62676c;
}
.bbp-head-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.bbp-head-status.bbp-status-wait { color: #8a6d12; }
.bbp-head-status.bbp-status-offers { color: #13719f; }
/* status icon in the popup header: give it a box so the pulse stays around the dot */
.bbp-head-status .bbp-status-icon { position: relative; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bbp-head-status.bbp-status-offers .bbp-status-icon { width: 14px; height: 14px; }
/* UA chat popups show "залишилось N днів" in the header, so the bubble does not repeat it */
html[lang="ua"] .popup-container.wide .request-body .message .deadline { display: none; }

/* =====================================================================
 * Chat typography and rhythm: one left edge, two text sizes, one spacing scale.
 *   - avatar / logo column 36px + 12px gap, so every speaker's text starts on the same line
 *   - people: Inter 15px/1.5; BlaBlaPrice: Inter 16px/1.55
 *   - 22px between speakers, 6px between consecutive BlaBlaPrice lines
 * ===================================================================== */

/* one left edge */
.popup-container.wide .request-body .message .avatar { flex: 0 0 36px; width: 36px; height: 36px; margin: 0 0 0 12px; }
.popup-container.wide .request-body :not(.text-right) > .message .inner { padding-right: 0; margin-right: 0; }
.popup-container.wide .blabla-comment { display: flex; align-items: flex-start; }
.popup-container.wide .blabla-comment::before {
    flex: 0 0 36px;
    width: 36px;
    height: 24px;
    margin: 0 0 0 12px;
    background-position: 50% 2px;
}
.popup-container.wide .blabla-comment .text { flex: 1 1 auto; min-width: 0; padding-right: 0; }

/* two text sizes */
.popup-container.wide .request-body .message .inner { font-size: 15px; line-height: 1.5; }
.popup-container.wide .request-body .message .inner .comment,
.popup-container.wide .request-body .message .inner .title,
.popup-container.wide .request-body .message .inner .region,
.popup-container.wide .request-body .message .inner .contacts { font-size: 15px; line-height: 1.5; }
.popup-container.wide .blabla-comment .text,
.popup-container.wide .blabla-comment .text p,
.popup-container.wide .blabla-comment .text h4 { font-size: 16px; line-height: 1.55; }
.popup-container.wide .request-body .message .inner .date { font-size: 12.5px; }

/* spacing between speakers and inside a message */
.popup-container.wide .request-body_inner > * { margin-top: 0; margin-bottom: 0; }
.popup-container.wide .request-body_inner > * + * { margin-top: 22px; }
.popup-container.wide .request-body_inner > .blabla-comment + .blabla-comment { margin-top: 6px; }
.popup-container.wide .request-body_inner > .drop-menu { margin-top: 18px; }
.popup-container.wide .request-body .message .inner { margin-top: 0; margin-bottom: 0; }
.popup-container.wide .request-body .text-right .message .inner { margin-bottom: 22px; }
.popup-container.wide .request-body .message .inner > * + * { margin-top: 4px; }
.popup-container.wide .request-body .message .inner .bbp-msg-price { margin-top: 2px; }
.popup-container.wide .request-body .message .inner *:has(> img),
.popup-container.wide .request-body .message .inner *:has(> a > img) { margin-top: 10px !important; }
.popup-container.wide .request-body .message .inner .popup-button { margin-top: 12px; }
.popup-container.wide .request-body :not(.text-right) > .message .inner .date { margin-top: 8px; }

/* BlaBlaPrice speaks again after someone else: show its logo and name again */
.popup-container.wide .blabla-comment .text::before { display: none !important; }
.popup-container.wide .request-body_inner > .blabla-comment:first-child .text::before,
.popup-container.wide .request-body_inner > :not(.blabla-comment) + .blabla-comment .text::before { display: block !important; }
.popup-container.wide .request-body_inner > :not(.blabla-comment) + .blabla-comment::before {
    background-image: url("/blabla/img/icon-logo.png");
    background-repeat: no-repeat;
    background-size: 14px auto;
}

/* "Твої дії" menu: one set of thin line icons (the theme mixed filled shapes and colours) */
.drop-menu .drop a svg { display: none; }
.drop-menu .drop a::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-color: #5f6368;
    -webkit-mask: var(--bbp-ico) center / 18px no-repeat;
            mask: var(--bbp-ico) center / 18px no-repeat;
}
.drop-menu .drop a.js-spam::before { background-color: #c4432b; }
.drop-menu .drop a.js-share { --bbp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 8l5-5 5 5'/%3E%3Cpath d='M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E"); }
.drop-menu .drop a.js-spam { --bbp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/svg%3E"); }
.drop-menu .drop a.js-close-popup { --bbp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.drop-menu .drop a.js-answer { --bbp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
/* any other item keeps a neutral dot-free spacing */
.drop-menu .drop a:not(.js-share):not(.js-spam):not(.js-close-popup):not(.js-answer)::before { background: none; }

/* BlaBlaPrice text size: beat the older, more specific rules */
.popup-container.wide .request-body_inner .blabla-comment .text,
.popup-container.wide .request-body_inner .blabla-comment .text p,
.popup-container.wide .request-body_inner .blabla-comment .text strong,
.popup-container.wide .request-body_inner .blabla-comment .text h4 { font-size: 16px !important; line-height: 1.55 !important; }
/* step 1 price field fills the card (a legacy rule capped it at 190px, leaving a small click target) */
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) input.input { max-width: none !important; justify-self: stretch; }
.popup-container.wide .tab-answer .input-group.bbp-steps { cursor: text; }
.popup-container.wide .tab-answer .input-group.bbp-steps :is(button, label, a, .bbp-price-chip) { cursor: pointer; }

/* chat popup column: only the chat shrinks, the composer below is always fully visible */
.popup-container.wide .request-body { flex: 1 1 auto; min-height: 0; }
.popup-container.wide .tabs-block { flex: 0 0 auto; }
/* a long comment scrolls inside the field instead of pushing the send button off screen */
.popup-container.wide .tab-answer .input-group.bbp-steps textarea.input { max-height: min(220px, 30vh) !important; }
/* the chat had a fixed height, so it never gave room to a taller composer */
.popup-container.wide .request-body { flex: 1 1 0; height: auto !important; max-height: none !important; }
/* legacy cap on the composer block (max-height: 200px) cut off the send button under a long comment */
.popup-container.wide .request-foot { max-height: none !important; height: auto !important; }

/* breathing room under the last card on every page, so the list never ends at the screen edge */
#main > .center { padding-bottom: 120px !important; }

/* static rows (not links): no hover at all - background, tile and icon stay as they are */
.bbp-item.bbp-item-static:hover { background: transparent !important; cursor: default; }
.bbp-item.bbp-item-static:hover .bbp-tile { background: var(--bbp-tile) !important; }
.bbp-item.bbp-item-static:hover .bbp-tile .bbp-icon { display: inline-block !important; }
.bbp-item.bbp-item-static .bbp-plus,
.bbp-item.bbp-item-static:hover .bbp-plus { display: none !important; }

/* empty state as a finished card (was a bare block: in dark mode it read as an unfinished grey patch) */
.bbp-empty {
    padding: 36px 32px 32px;
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(31, 35, 38, .04);
}
.bbp-empty-art { margin-bottom: 18px; }
.bbp-empty-text { max-width: 360px; }

/* left sidebar menu: clear active item, hover on the rest (they are links) */
aside a.link { border-radius: 12px; transition: background-color .15s; }
aside a.link:not(.active):hover { background-color: #f0f2f5; }
aside a.link.active { background-color: #fff; box-shadow: 0 1px 3px rgba(31, 35, 38, .08); font-weight: 600; }

/* seller filter: counter of ticked options in each group */
.seller-filter .btn-accordeon { display: flex; align-items: center; gap: 10px; }
.bbp-filter-count:empty { display: none; }
.bbp-filter-count {
    margin-right: auto;
    margin-left: 8px;
    padding: 3px 10px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: #13719f;
    background: #e3f3fb;
    border-radius: 12px;
}
.seller-filter .item-accordeon.bbp-has-selected { border-color: #b4def2 !important; }

/* icons inside buttons follow the button text colour; no blue outline on hover (legacy stroke) */
.popup-button svg,
.popup-button svg use,
.popup-button:hover svg,
.popup-button:hover svg use { fill: currentColor !important; stroke: none !important; }
.popup-button { transition: background-color .15s, color .15s; }
.popup-button.gray:hover { background-color: #f0f2f5; }

/* accent is blue everywhere (the filter checkbox blue); legacy greens overridden */
.count { background: #229ed9 !important; }
.position .popup-send { background: #229ed9 !important; }
.position textarea.input { border-color: #b4def2 !important; }
.position .input-reviews .text { color: #13719f !important; }
.count { color: #fff !important; }
/* profile avatar (legacy green gradient) in the accent blue */
aside .avatar:not(.bbp-av) { background: linear-gradient(-276deg, #2281b0, #44b3e9) !important; }

/* header "Пошир blablaprice" dropdown: a white card like the other menus */
.head-social .wrap.share-chat {
    top: calc(100% + 6px);
    margin: 0;
    padding: 16px 16px 14px;
    min-width: 0;
    width: max-content;
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(31, 35, 38, .12);
    gap: 12px;
    align-items: stretch;
    z-index: 30;
}
.head-social .wrap.share-chat p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbp-muted);
    text-align: right;
}
.head-social .wrap.share-chat > div { display: flex; flex-wrap: wrap; gap: 8px; }
.head-social .wrap.share-chat .share-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin: 0;
    padding: 0 12px 0 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bbp-ink);
    background: #f5f3ef;
    border: 0;
    border-radius: 18px;
    transition: background-color .15s;
}
.head-social .wrap.share-chat .share-button:hover { background: #f0f2f5; }
/* brand dot before each network name */
.head-social .wrap.share-chat .share-button::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9aa0a6;
}
.head-social .wrap.share-chat .share-button.facebook::before { background: #1877f2; }
.head-social .wrap.share-chat .share-button.whatsapp::before { background: #25d366; }
.head-social .wrap.share-chat .share-button.telegram::before { background: #2aabee; }
.head-social .wrap.share-chat .share-button.twitter::before { background: #1f2326; }
/* show the share card fully (legacy fade animation stopped half-transparent); an invisible bridge keeps hover across the gap */
.head-social:hover .wrap.share-chat { display: flex; flex-direction: column; opacity: 1; animation: bbpShareIn .15s ease-out; }
.head-social .wrap.share-chat::before { content: ""; position: absolute; right: 0; left: 0; top: -8px; height: 8px; }
@keyframes bbpShareIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* bridge covers the whole gap between the share icon and the card */
.head-social .wrap.share-chat::before { top: -48px; height: 48px; }
/* opened by click (js/bbp-theme.js): stays until a click elsewhere */
.head-social.bbp-share-open .wrap.share-chat { display: flex; flex-direction: column; opacity: 1; }
.head-social > button { cursor: pointer; }

/* an empty list explains itself: drop the intro line of BlaBlaPrice right above the empty-state card */
.blabla-comment:has(~ .bbp-empty),
.blabla-comment:has(+ * .bbp-empty) { display: none !important; }

/* =====================================================================
 * Home v2 (UA): short hero, example slider, one CTA, 3 compact steps
 * ===================================================================== */
.bbp-home2 { max-width: 720px; margin: 0 auto; padding: 48px 0 40px; }
.bbp-h2-hero h1 {
    margin: 0;
    font-family: var(--bbp-serif);
    font-weight: 500;
    font-size: 44px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--bbp-ink);
}
.bbp-h2-hero p { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--bbp-muted); }

/* slider */
.bbp-slider { margin-top: 32px; }
.bbp-slides {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    outline: none;
}
.bbp-slides::-webkit-scrollbar { display: none; }
.bbp-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: 20px 22px 18px;
    background: #fff;
    border: 1px solid var(--bbp-line);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(31, 35, 38, .04);
}
.bbp-slide-top { display: flex; justify-content: space-between; align-items: center; }
.bbp-slide-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bbp-muted); }
.bbp-slide-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #9a9ea3; }
.bbp-slide-ask { display: flex; flex-direction: column; align-items: flex-end; margin: 14px 0 16px; }
.bbp-slide-bubble {
    max-width: 85%;
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--bbp-ink);
    background: #edece9;
    border-radius: 16px;
}
.bbp-slide-who { margin-top: 6px; font-size: 12px; color: #62676c; }
.bbp-slide-offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bbp-slide-offers li {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--bbp-line);
    border-radius: 14px;
}
.bbp-slide-offers li.is-best { border-color: #b4def2; background: #f4f8fe; }
.bbp-slide-offers .bbp-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.bbp-slide-seller { display: flex; flex-direction: column; min-width: 0; }
.bbp-slide-seller b { font-size: 14px; font-weight: 600; color: var(--bbp-ink); }
.bbp-slide-seller small { font-size: 12.5px; color: var(--bbp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbp-slide-price { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--bbp-serif); font-size: 19px; font-weight: 600; color: var(--bbp-ink); white-space: nowrap; }
.bbp-slide-price em { font-family: "Inter", system-ui, sans-serif; font-style: normal; font-size: 11px; font-weight: 600; color: #13719f; }
.bbp-slider-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.bbp-slider-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    color: var(--bbp-ink); background: transparent;
    border: 1px solid var(--bbp-line); border-radius: 50%; cursor: pointer;
    transition: background-color .15s;
}
.bbp-slider-arrow:hover { background: #f0f2f5; }
.bbp-slider-dots { display: flex; gap: 6px; }
.bbp-slider-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: #d6d3cc; cursor: pointer; transition: width .2s, background-color .2s; }
.bbp-slider-dots button.is-active { width: 20px; background: var(--bbp-ink); }

/* CTA, steps, note */
.bbp-h2-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.bbp-h2-cta .menu-button { animation: none; }
.bbp-h2-steps { list-style: none; margin: 36px 0 0; padding: 22px 0 0; border-top: 1px dashed var(--bbp-line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bbp-h2-steps li { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.bbp-h2-steps .bbp-tile { grid-row: 1 / 3; }
.bbp-h2-steps b { font-size: 14px; font-weight: 600; color: var(--bbp-ink); }
.bbp-h2-steps small { font-size: 12.5px; color: var(--bbp-muted); }
.bbp-h2-note { display: flex; align-items: center; gap: 6px; margin: 22px 0 0; font-size: 13px; color: var(--bbp-muted); }
.bbp-h2-country { margin-top: 28px; }

@media (max-width: 767px) {
    .bbp-home2 { padding: 28px 0 24px; }
    .bbp-h2-hero h1 { font-size: 32px; }
    .bbp-h2-hero p { font-size: 15.5px; }
    .bbp-slide { padding: 16px 14px 14px; }
    .bbp-slide-offers li { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 9px 10px; }
    .bbp-slide-offers .bbp-av { width: 30px; height: 30px; font-size: 13px; }
    .bbp-slide-price { font-size: 17px; }
    .bbp-h2-steps { grid-template-columns: 1fr; gap: 12px; }
}

/* =====================================================================
 * Request form v2: one composer card (text + detail chips + send), suggestion chips below
 * ===================================================================== */
.bbp-req2 .bbp-title { font-size: 36px; }
.bbp-composer {
    margin-top: 20px;
    padding: 16px 20px 12px 16px;
    background: #fff;
    border: 1px solid #e3e0d8;
    border-radius: 22px;
    box-shadow: 0 6px 24px rgba(31, 35, 38, .06);
    transition: border-color .2s, box-shadow .2s;
    cursor: text;
}
.bbp-composer:focus-within { border-color: #cfcbc1; box-shadow: 0 8px 28px rgba(31, 35, 38, .09); }
.bbp-req2 .bbp-composer-text {
    display: block;
    width: 100%;
    min-height: 84px;
    max-height: 320px;
    margin: 0;
    padding: 4px 0 8px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--bbp-ink);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
    resize: none;
}
.bbp-composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; cursor: default; }
.bbp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin: 0;
    padding: 0 12px 0 6px;
    color: var(--bbp-ink);
    background: #f5f3ef;
    border: 1px solid transparent;
    border-radius: 18px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.bbp-chip:hover { background: #f0f2f5; }
.bbp-chip:focus-within { border-color: #cfcbc1; background: #fff; }
.bbp-chip .bbp-icon { flex: none; width: 16px; height: 16px; color: #5c6166; }
.bbp-chip select,
.bbp-chip input {
    height: 34px;
    padding: 0 0 0 8px;
    font: 500 14px/1 "Inter", system-ui, sans-serif;
    color: var(--bbp-ink);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    cursor: pointer;
}
.bbp-chip select { max-width: 190px; -webkit-appearance: none; appearance: none; padding-left: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7075' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") left 4px center no-repeat !important; }
.bbp-chip input { width: 110px; cursor: text; -moz-appearance: textfield; }
.bbp-chip input::-webkit-outer-spin-button, .bbp-chip input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bbp-chip input::placeholder { color: #62676c; font-weight: 500; }
.bbp-composer-send { margin-right: auto; }
.bbp-composer-send .bbp-btn-primary { height: 40px; padding: 0 18px; border-radius: 14px; font-size: 14.5px; }

/* suggestions under the card */
.bbp-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.bbp-suggest-label { margin-left: 4px; font-size: 13px; color: var(--bbp-muted); }
.bbp-suggest-chip {
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--bbp-ink);
    background: transparent;
    border: 1px dashed #d6d3cc;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, opacity .15s;
}
.bbp-suggest-chip:hover { background: #f0f2f5; border-style: solid; }
.bbp-suggest-chip.is-used { opacity: .45; }
.bbp-req2 .bbp-note-inline { margin-top: 18px; }

@media (max-width: 640px) {
    .bbp-req2 .bbp-title { font-size: 28px; }
    .bbp-composer { padding: 14px 14px 10px 12px; border-radius: 18px; }
    .bbp-composer-send { margin-right: 0; width: 100%; }
    .bbp-composer-send .bbp-btn-primary { width: 100%; justify-content: center; }
    .bbp-chip select { max-width: 150px; }
}
/* composer fixes: the legacy .popup-send sizing squashed the button; chips clip their inner controls */
.bbp-composer-send .bbp-btn-primary.popup-send {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    white-space: nowrap;
}
.bbp-composer-send .bbp-btn-primary svg { width: 16px; height: 16px; }
.bbp-chip { overflow: hidden; }
.bbp-chip select { max-width: 160px; }
@media (max-width: 640px) {
    .bbp-composer-send .bbp-btn-primary.popup-send { width: 100% !important; justify-content: center; height: 44px !important; }
}
.bbp-composer.bbp-shake { animation: bbpShake .35s; border-color: #e2a595; }
@keyframes bbpShake { 20%, 60% { transform: translateX(5px); } 40%, 80% { transform: translateX(-5px); } }

/* category icon before titles in chat headers and cabinet cards */
.request-head .title { display: flex; align-items: center; gap: 8px; }
.bbp-head-icon { display: inline-flex; flex: none; color: #5c6166; }
.bbp-head-icon .bbp-icon { width: 16px; height: 16px; }

/* inactive send button: reachable by the mouse, shows why it is inactive */
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment):not(.bbp-ready) .popup-send,
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(.bbp-has-comment) .popup-send { pointer-events: auto !important; cursor: help; overflow: visible; }
.popup-container.wide .tab-answer .popup-send[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    padding: 6px 10px;
    font: 500 12.5px/1.3 "Inter", system-ui, sans-serif;
    white-space: nowrap;
    color: #fff;
    background: var(--bbp-ink);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(31, 35, 38, .18);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
}
.popup-container.wide .tab-answer .popup-send[data-tip]:hover::after { opacity: 1; transform: none; }
.popup-container.wide .tab-answer .input-group.bbp-steps .popup-send { position: relative !important; }

/* category example under the request form */
.bbp-req-example { margin-top: 36px; padding-top: 24px; border-top: 1px dashed var(--bbp-line); }
.bbp-req-example-title { margin-bottom: 12px; font-family: var(--bbp-serif); font-size: 20px; font-weight: 500; color: var(--bbp-ink); }
.bbp-req-example .bbp-slide { box-shadow: none; }

/* ---------- Buyer: real offers as a comparison list ---------- */
.bbp-offers { margin: 18px 0 8px; padding: 18px 18px 14px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 20px; }
.bbp-offers-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.bbp-offers-head span:first-child { font-family: var(--bbp-serif); font-size: 19px; font-weight: 500; color: var(--bbp-ink); }
.bbp-offers-sort { font-size: 12px; color: #62676c; }
.bbp-offer { padding: 14px; border: 1px solid var(--bbp-line); border-radius: 16px; }
.bbp-offer + .bbp-offer { margin-top: 10px; }
.bbp-offer.is-best { border-color: #b4def2; background: #f4f8fe; }
.bbp-offer-top { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; }
.bbp-offer-top .bbp-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.bbp-offer-who { display: flex; flex-direction: column; min-width: 0; margin: 0 !important; cursor: pointer; background: none !important; }
.bbp-offer-who b { font-size: 15px; font-weight: 600; color: var(--bbp-ink); }
.bbp-offer-who small { font-size: 12.5px; color: #62676c; }
.bbp-offer-who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.bbp-offer-reviews span { margin-left: 4px; font-weight: 600; }
.bbp-offer-reviews .is-pos { color: #13719f; }
.bbp-offer-reviews .is-neg { color: #c4432b; }
.bbp-offer-price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.bbp-offer-price b { font-family: var(--bbp-serif); font-size: 22px; font-weight: 600; color: var(--bbp-ink); line-height: 1.1; }
.bbp-offer-price s { font-size: 12.5px; color: #9a9ea3; }
.bbp-offer-price em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #13719f; }
.bbp-offer-text { margin: 10px 50px 0 0; }
.bbp-offer-text-body { font-size: 14.5px; line-height: 1.5; color: var(--bbp-ink); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bbp-offer-text.is-open .bbp-offer-text-body { display: block; -webkit-line-clamp: unset; }
.bbp-offer-more { margin-top: 4px; padding: 0; font-size: 13px; font-weight: 600; color: #13719f; background: none; border: 0; cursor: pointer; }
.bbp-offer-more:hover { text-decoration: underline; }
.bbp-offer-photos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 50px 0 0; padding: 0; }
.bbp-offer-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--bbp-line); display: block; }
.bbp-offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 50px 0 0; }
.bbp-offer-foot form { margin: 0; }
.bbp-offer-foot .popup-button { margin: 0 !important; height: 38px; padding: 0 16px; border-radius: 12px; }
.bbp-offer-date { font-size: 11.5px; color: #9a9ea3; }
@media (max-width: 640px) {
    .bbp-offers { padding: 14px 12px 10px; }
    .bbp-offer-text, .bbp-offer-photos { margin-right: 0; }
    .bbp-offer-foot { margin-right: 0; flex-direction: column-reverse; align-items: stretch; }
    .bbp-offer-foot .popup-button { width: 100%; }
}
.bbp-offer-who.name-reviews { align-items: flex-start !important; justify-content: center; text-align: right !important; padding: 0 !important; }

/* reverse auction hint above the seller's price editor */
.bbp-auction-hint {
    width: calc(100% - 32px);
    max-width: 760px;
    margin: 10px auto 0;
    padding: 10px 14px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #7a4b0e;
    background: #fdf3e1;
    border: 1px solid #f1d9ad;
    border-radius: 14px;
}
.bbp-auction-hint.is-leading { color: #13719f; background: #e3f3fb; border-color: #b4def2; }
.bbp-auction-hint b { font-weight: 600; }
/* crossed "was" price in examples */
.bbp-slide-price s { font-family: "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 500; color: #9a9ea3; }
/* offers sort switch */
.bbp-offers-sort { display: inline-flex; padding: 3px; gap: 2px; background: #f3f1ec; border-radius: 12px; }
.bbp-offers-sort button { height: 28px; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: #5c6166; background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.bbp-offers-sort button:hover { color: var(--bbp-ink); }
.bbp-offers-sort button.is-active { color: var(--bbp-ink); background: #fff; box-shadow: 0 1px 3px rgba(31, 35, 38, .1); }
.bbp-offers-head { align-items: center; }

/* "Твої дії" in the chat header as a "⋯" button (moved there by js/bbp-theme.js) */
.popup-container.wide .request-head { position: relative; }
.popup-container.wide .request-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.drop-menu.bbp-head-menu { position: relative; display: block; margin: 0 auto 0 8px !important; flex: none; }
.drop-menu.bbp-head-menu > a {
    width: 40px; height: 40px; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent !important; color: var(--bbp-ink) !important;
    border: 1px solid var(--bbp-line) !important; border-radius: 50% !important;
}
.drop-menu.bbp-head-menu > a span { display: none; }
.drop-menu.bbp-head-menu > a svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.drop-menu.bbp-head-menu > a:hover,
.drop-menu.bbp-head-menu.active > a { background: #f0f2f5 !important; }
.drop-menu.bbp-head-menu .drop {
    position: absolute; left: 0; top: calc(100% + 6px); right: auto;
    margin: 0 !important; min-width: 220px; z-index: 40;
}
/* header menu sits left of the (absolutely placed) close button and its dropdown stays above the chat */
.popup-container.wide .request-head { z-index: 30; }
.drop-menu.bbp-head-menu { position: absolute !important; left: 68px; top: 50%; transform: translateY(-50%); margin: 0 !important; z-index: 31; }
.popup-container.wide .request-head > div:first-child { padding-left: 110px; }
/* chat footer blocks: the legacy 20px left padding pushed the share row off-centre */
.popup-container.wide .request-foot { padding-right: 0 !important; padding-left: 0 !important; }
/* empty suggestions box (a single empty <li>) is not shown */
.header-search .autocomplete:has(> li:only-child:empty) { display: none !important; }
/* highlighted match sits inside the word (no gaps around it) */
.header-search .autocomplete strong { margin: 0 !important; padding: 0 1px !important; border-radius: 3px; }
/* the link was a flex row (gap 8px), which split the highlighted part off the word */
.header-search .autocomplete li a { display: block !important; }
.header-search .autocomplete li a strong { display: inline !important; }

/* buyer: offers card before any offer arrives */
.bbp-offers-empty-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 12px 6px; }
.bbp-offers-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 12px; color: #13719f; background: #e3f3fb; border-radius: 50%; }
.bbp-offers-empty-title { margin: 0; font-family: var(--bbp-serif); font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--bbp-ink); }
.bbp-offers-empty-text { max-width: 520px; margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--bbp-muted); }
.bbp-offers-empty-share { margin-top: 16px; }
.bbp-offers-empty-share .share-chat { position: static; display: flex !important; flex-direction: column; align-items: center; gap: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; }
.bbp-offers-empty-share .share-chat > p { display: none; }
.bbp-offers-empty-share .share-chat > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bbp-offers-empty-share .share-button { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 12px 0 14px; font-size: 13.5px; font-weight: 500; text-transform: capitalize; color: var(--bbp-ink); background: #f5f3ef; border: 0; border-radius: 18px; }
.bbp-offers-empty-share .share-button:hover { background: #f0f2f5; }
.bbp-offers-empty-share .share-button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; }
.bbp-offers-empty-share .share-button.facebook::before { background: #1877f2; }
.bbp-offers-empty-share .share-button.whatsapp::before { background: #25d366; }
.bbp-offers-empty-share .share-button.telegram::before { background: #2aabee; }
.bbp-offers-empty-share .share-button.twitter::before { background: #1f2326; }
/* the share row at the bottom of the chat would repeat the card's buttons */
.popup-container.wide:has(.bbp-offers-empty) .tab-share { display: none !important; }
/* breathing room around the offers card and above the chat footer */
.popup-container.wide .bbp-offers { margin: 22px 0 26px !important; }
.popup-container.wide .request-body_inner { padding-bottom: 32px !important; }
.popup-container.wide .bbp-offers .bbp-offer + .bbp-offer { margin-top: 10px; }
.popup-container.wide .tab-share .share-chat { padding: 14px 0 16px !important; }

/* segmented tabs (Нові / З відгуками / Відмовився): a clear active pill */
.links-horizontal { background: #efece6 !important; border: 1px solid var(--bbp-line) !important; padding: 3px !important; }
.links-horizontal a { color: #5c6166 !important; }
.links-horizontal a:hover { color: var(--bbp-ink) !important; }
.links-horizontal a.active,
.links-horizontal li.active a { background: #fff !important; color: var(--bbp-ink) !important; font-weight: 600; box-shadow: 0 1px 4px rgba(31, 35, 38, .12); }

/* review composer: choose a rating -> it becomes a chip on top, send turns active */
.popup-container.wide .request-foot .form-wrap .popup-send { position: relative; }
.popup-container.wide .request-foot .form-wrap:not(.bbp-rated) .popup-send { background: #e4e1da !important; cursor: help; }
.popup-container.wide .request-foot .form-wrap:not(.bbp-rated) .popup-send svg,
.popup-container.wide .request-foot .form-wrap:not(.bbp-rated) .popup-send svg use { fill: #fff !important; }
.popup-container.wide .request-foot .form-wrap:not(.bbp-rated) .popup-send::after {
    content: "Оберіть оцінку";
    position: absolute; left: 0; bottom: calc(100% + 8px);
    padding: 6px 10px; white-space: nowrap;
    font: 500 12.5px/1.3 "Inter", system-ui, sans-serif;
    color: #fff; background: var(--bbp-ink); border-radius: 8px;
    opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.popup-container.wide .request-foot .form-wrap:not(.bbp-rated) .popup-send:hover::after { opacity: 1; transform: none; }
/* before the choice the chips stay neutral (the site pre-selects "positive" silently) */
.popup-container.wide .request-foot .form-wrap:not(.bbp-rated) .button-reviews button { background: #fff !important; border-color: var(--bbp-line) !important; }
.popup-container.wide .request-foot .form-wrap.bbp-rated { grid-template-areas: "chips chips" "text send"; }
.popup-container.wide .request-foot .form-wrap.bbp-rated .button-reviews button:not(.is-chosen) { display: none; }
.popup-container.wide .request-foot .form-wrap.bbp-rated .button-reviews { margin-bottom: 4px; }
.popup-container.wide .request-foot .form-wrap.bbp-rated .button-reviews button.is-chosen::after { content: "змінити"; margin-right: 4px; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; color: #5c6166; }

/* buyer's own review bubble */
.bbp-own-review .inner { min-width: 220px; }
.bbp-rate-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; font-size: 12.5px; font-weight: 600; border-radius: 12px; }
.bbp-rate-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bbp-rate-chip.is-pos { color: #13719f; background: #e3f3fb; }
.bbp-rate-chip.is-neu { color: #8a6d12; background: #fbf1d6; }
.bbp-rate-chip.is-neg { color: #b23a22; background: #fbe6e1; }
.bbp-own-review .comment { margin-top: 6px !important; }
.bbp-own-review-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px !important; }
.bbp-own-review-foot .date { position: static !important; margin: 0 !important; }
.bbp-review-edit { padding: 0; font-size: 12.5px; font-weight: 600; color: #13719f; background: none; border: 0; cursor: pointer; }
.bbp-review-edit:hover { text-decoration: underline; text-underline-offset: 2px; }
.request-body .text-right .message.bbp-own-review .inner { margin-bottom: 8px; }

/* reviews popover next to a name: a small card right under the name instead of a wide dark slab */
.name-reviews { position: relative; }
.name-reviews .reviews {
    right: 0 !important;
    top: calc(100% + 6px) !important;
    width: max-content !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    color: var(--bbp-ink) !important;
    background: #fff !important;
    border: 1px solid var(--bbp-line);
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(31, 35, 38, .12);
    font-size: 12.5px;
}
.name-reviews:hover .reviews { display: block; opacity: 1; animation: none; }
.name-reviews .reviews > div svg { width: 16px; height: 16px; margin-left: 8px; }
.name-reviews .reviews strong { color: var(--bbp-ink); }
/* compact counters beside the name: tidy spacing */
.name-reviews .positive-count, .name-reviews .neutral-count, .name-reviews .negative-count { gap: 3px; margin-right: 6px; }

/* =====================================================================
 * Cabinet pagination: inline under the list (was a fixed white bar over the page bottom)
 * ===================================================================== */
.pagination-wrapper.bbp-pager {
    position: static !important;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
    margin: 24px auto 8px; padding: 0 !important;
    background: transparent !important;
}
.bbp-pager a, .bbp-pager span { text-decoration: none; }
.bbp-pager .bbp-pager-num,
.bbp-pager .bbp-pager-step {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 38px !important; height: 38px; min-height: 0 !important; margin: 0 !important; padding: 0 10px;
    font-size: 14px; font-weight: 600; color: var(--bbp-ink) !important;
    background: #fff !important; border: 1px solid var(--bbp-line); border-radius: 12px !important;
    transition: background-color .15s;
}
.bbp-pager a.bbp-pager-num:hover, .bbp-pager a.bbp-pager-step:hover { background: #f0f2f5 !important; }
.bbp-pager .bbp-pager-num.is-current { color: #fff !important; background: var(--bbp-ink) !important; border-color: var(--bbp-ink); }
.bbp-pager .bbp-pager-step { font-size: 18px; }
.bbp-pager .bbp-pager-step.is-disabled { opacity: .35; }
.bbp-pager .bbp-pager-gap { padding: 0 4px; color: #9a9ea3; }
.bbp-pager .bbp-pager-info { flex: 1 0 100%; margin-top: 6px; text-align: center; font-size: 12.5px; color: var(--bbp-muted); }
/* "Змінити коментар" link under the card while editing an offer's price */
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-edit-comment { display: none; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-has-comment:not(.bbp-step-comment) .bbp-edit-comment {
    display: inline-flex; grid-area: hint; justify-self: end; align-self: center;
    margin: 8px 0 0 8px; padding: 0; font-size: 13px; font-weight: 600; color: #13719f;
    background: none; border: 0; cursor: pointer;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-edit-comment:hover { text-decoration: underline; text-underline-offset: 2px; }

/* cabinet list: search + category filter */
.bbp-list-filter { display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; margin: 0 auto 10px; }
.bbp-list-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 42px; margin: 0; padding: 0 14px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 14px; }
.bbp-list-search:focus-within { border-color: #cfcbc1; }
.bbp-list-search .bbp-icon { flex: none; color: #62676c; }
.bbp-list-search input { flex: 1; min-width: 0; height: 40px; padding: 0; font-size: 14.5px; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none; }
.bbp-list-cat select { height: 42px; max-width: 240px; padding: 0 14px 0 30px; font: 500 14px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7075' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") left 12px center no-repeat !important;
    border: 1px solid var(--bbp-line) !important; border-radius: 14px !important; -webkit-appearance: none; appearance: none; cursor: pointer; }
.bbp-list-cat { margin: 0; }
.bbp-list-go { height: 42px; padding: 0 18px; font-size: 14px; font-weight: 600; color: #fff; background: var(--bbp-ink); border: 0; border-radius: 14px; cursor: pointer; }
.bbp-list-go:hover { background: #3a4045; }
.bbp-list-result { max-width: 640px; margin: 0 auto 14px; font-size: 13.5px; color: var(--bbp-muted); }
.bbp-list-result b { color: var(--bbp-ink); }
.bbp-list-result a { margin-right: 8px; font-weight: 600; color: #13719f; }
/* someone else's review in a chat */
.bbp-their-review .bbp-review-head { font-size: 13.5px; margin-bottom: 6px !important; }
.bbp-their-review .bbp-review-head b { font-weight: 600; }
.bbp-their-review .bbp-review-head span { color: #62676c; }
.bbp-their-review .comment { margin-top: 6px !important; }

/* ratings keep their own meaning colours: positive is green (not the blue accent) */
.bbp-rate-chip.is-pos { color: #2f7a2a; background: #e3f2dc; }
.bbp-offer-reviews .is-pos { color: #2f7a2a; }
.popup-container.wide .request-foot form:not(.neutral):not(.negative) .button-reviews button[value="2"].is-chosen,
.popup-container.wide .request-foot .form-wrap.bbp-rated .button-reviews button[value="2"] { background: #e3f2dc !important; border-color: #bfe0a8 !important; }
/* chosen rating chip colour comes from the chip itself (a saved rating is chosen without the site's click handler) */
.popup-container.wide .request-foot .form-wrap.bbp-rated .button-reviews button.is-chosen[value="1"] { background: #fbf1d6 !important; border-color: #ecd9a0 !important; }
.popup-container.wide .request-foot .form-wrap.bbp-rated .button-reviews button.is-chosen[value="0"] { background: #fbe6e1 !important; border-color: #efbfb4 !important; }

/* every BlaBlaPrice line on cabinet pages speaks as the assistant (was a bubble where nested one level deeper) */
#main .center .blabla-comment .text {
    display: block;
    background: transparent !important;
    border-radius: 0;
    padding: 0 2px 0 0;
    box-shadow: none;
    font-family: var(--bbp-serif);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bbp-ink);
}
#main .center .blabla-comment .text strong { font-weight: 600; }
#main .center .blabla-comment .text > strong:only-child { font-weight: 600; }
#main .center .blabla-comment .text::after { display: none; }
#main .center .blabla-comment .text::before {
    content: "BlaBlaPrice";
    display: block !important;
    position: static;
    margin: 0 0 2px;
    border: 0;
    width: auto; height: auto;
    background: none;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
    color: #62676c;
}
#main .center .blabla-comment { max-width: 640px; margin-right: auto; margin-left: auto; }
.bbp-home .blabla-comment .text::before { display: none !important; }

/* =====================================================================
 * Unified contacts page (buyer "Контакти компаній" / seller "Контакти клієнтів")
 * ===================================================================== */
.bbp-contacts { max-width: 640px; margin: 36px auto 40px; }
.bbp-contacts-title { margin: 0; font-family: var(--bbp-serif); font-weight: 500; font-size: 32px; color: var(--bbp-ink); }
.bbp-contacts-sub { margin: 6px 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--bbp-muted); }
.bbp-contact-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bbp-contact-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: #5c6166; background: #fff; border: 1px solid var(--bbp-line); border-radius: 17px; text-decoration: none; }
.bbp-contact-chip span { min-width: 20px; padding: 1px 6px; font-size: 12px; text-align: center; color: #5c6166; background: #f0eee8; border-radius: 10px; }
.bbp-contact-chip:hover { color: var(--bbp-ink); }
.bbp-contact-chip.is-active { color: #fff; background: var(--bbp-ink); border-color: var(--bbp-ink); }
.bbp-contact-chip.is-active span { color: var(--bbp-ink); background: #fff; }
.bbp-contact-chip.has-action:not(.is-active) span { color: #fff; background: #229ed9; }
.bbp-contacts-none { padding: 24px 0; text-align: center; color: var(--bbp-muted); }
.bbp-contact.request.open-popup { margin-bottom: 14px; }
.bbp-contact-body { padding: 4px 16px 16px; }
.bbp-contact-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; font-size: 12.5px; font-weight: 600; border-radius: 12px; }
.bbp-contact-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bbp-contact-state.is-action { color: #13719f; background: #e3f3fb; }
.bbp-contact-state.is-done { color: #2f7a2a; background: #e3f2dc; }
.bbp-contact-state.is-refused { color: #5c6166; background: #f0eee8; }
.bbp-contact-person { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bbp-contact-person .bbp-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex: none; }
.bbp-contact-person b { display: block; font-size: 15px; font-weight: 600; color: var(--bbp-ink); }
.bbp-contact-person small { font-size: 12.5px; color: var(--bbp-muted); }
.bbp-contact-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 52px 0 0; font-size: 14.5px; }
.bbp-contact-links a { color: var(--bbp-ink); text-decoration: underline; text-decoration-color: rgba(31, 35, 38, .3); text-underline-offset: 3px; }
.bbp-contact-note { margin: 10px 52px 0 0; font-size: 13.5px; color: var(--bbp-muted); }
.bbp-contact .message { margin-top: 12px; }
.bbp-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 52px 0 0; }
.bbp-contact-actions .bbp-btn-primary { height: 38px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.bbp-contact-secondary { height: 38px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 12px; cursor: pointer; }
.bbp-contact-secondary:hover { background: #f0f2f5; }
.bbp-contact.is-refused { opacity: .75; }
@media (max-width: 640px) {
    .bbp-contacts { margin-top: 20px; }
    .bbp-contact-links, .bbp-contact-note, .bbp-contact-actions { margin-right: 0; }
}

/* reviews inside a contacts card: compact quoted blocks aligned with the contact text */
.bbp-contact .message { display: block !important; margin: 12px 52px 0 0 !important; padding: 0 !important; }
.bbp-contact .text-right { text-align: right; }
.bbp-contact .message .box { display: flex !important; align-items: flex-start; gap: 10px; padding: 0 !important; transform: none !important; }
.bbp-contact .message .avatar { flex: 0 0 28px; width: 28px !important; height: 28px !important; margin: 2px 0 0 !important; font-size: 11px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.bbp-contact .message .inner {
    flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 10px 14px !important;
    color: var(--bbp-ink) !important; background: #f5f3ef !important;
    border: 0 !important; border-radius: 14px !important; box-shadow: none !important;
}
.bbp-contact .message .inner::before, .bbp-contact .message .inner::after { display: none !important; }
.bbp-contact .message .inner .date { position: static !important; margin-top: 6px !important; font-size: 11.5px; color: #62676c !important; text-align: right !important; }
.bbp-contact .bbp-own-review-foot { justify-content: flex-start; }
.bbp-contact .bbp-review-head { margin-bottom: 6px; font-size: 13px; }
.bbp-contact .bbp-contact-actions { margin-top: 14px; }

/* =====================================================================
 * Colour hierarchy on contacts: only "needs action" is loud; the rest stays quiet.
 * A review is its text led by a coloured dot (green / yellow / red).
 * ===================================================================== */
.bbp-rate-dot { display: inline-block; width: 9px; height: 9px; margin: 0 0 1px 8px; border-radius: 50%; vertical-align: middle; background: #c9a227; }
.bbp-rated-text.is-pos .bbp-rate-dot { background: #3f9a37; }
.bbp-rated-text.is-neg .bbp-rate-dot { background: #d0452f; }
.bbp-rated-text { margin-top: 0 !important; }

/* state labels: action = filled blue pill, done / refused = plain muted text */
.bbp-contact-state.is-action { color: #fff; background: #229ed9; }
.bbp-contact-state.is-action::before { background: #fff; }
.bbp-contact-state.is-done,
.bbp-contact-state.is-refused { padding-right: 0; color: #62676c; background: transparent; }
.bbp-contact-state.is-done::before { width: auto; height: auto; content: "✓"; background: none; color: #3f9a37; border-radius: 0; }
.bbp-contact-state.is-refused::before { background: #b3afa6; }
/* the card that needs you gets an accent edge */
/* cards that wait for a review are marked by the "Залишити відгук" button, no side stripe */
/* review blocks inside cards: lighter, a quote rather than a box */
.bbp-contact .message .inner { background: transparent !important; padding: 2px 12px 2px 0 !important; border-right: 2px solid var(--bbp-line) !important; border-radius: 0 !important; }
/* own review in a card: same quiet quote as the other side (beat the own-bubble fill) */
.bbp-contact .text-right .message .inner.inner { background: transparent !important; padding: 2px 12px 2px 0 !important; border-right: 2px solid var(--bbp-line) !important; border-radius: 0 !important; }
.bbp-contact .text-right .message .inner.inner .bbp-review-head span { color: #62676c; }

/* =====================================================================
 * Trello-style card indicators, "нове" marker, quick actions, reminders
 * ===================================================================== */
.bbp-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--bbp-line); }
.bbp-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: #5c6166; white-space: nowrap; }
.bbp-meta .bbp-icon { width: 14px; height: 14px; }
.bbp-meta.is-accent { color: #13719f; }
.bbp-meta.is-warn { color: #8a6d12; }
.bbp-meta.is-urgent { color: #c4432b; }
.bbp-meta-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9a227; }
.bbp-meta.is-pos .bbp-meta-dot { background: #3f9a37; }
.bbp-meta.is-neg .bbp-meta-dot { background: #d0452f; }
.bbp-meta.is-empty { color: #a6a39c; }
.bbp-meta.is-empty .bbp-meta-dot { background: transparent; border: 1.5px solid #c9c6bf; }
.bbp-card-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
.bbp-card-actions form { margin: 0; }
.bbp-meta-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 10px; cursor: pointer; text-decoration: none; }
.bbp-meta-btn:hover { background: #f0f2f5; }
.bbp-meta-btn.is-quiet { color: #62676c; border-color: transparent; background: transparent; }
.bbp-meta-btn.is-quiet:hover { color: #c4432b; background: transparent; }
.bbp-contact .bbp-card-meta { margin-right: 52px; }

/* "нове" marker in the card title */
.bbp-new-dot { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; padding: 1px 6px 1px 8px; font-family: "Inter", system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; background: #229ed9; border-radius: 10px; }
.bbp-new-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.request.open-popup.bbp-is-new { box-shadow: 0 0 0 2px rgba(34, 158, 217, .25), 0 4px 20px rgba(31, 35, 38, .06) !important; }

/* reminder on a contact that still needs a decision */
.bbp-contact-remind { margin: 12px 52px 0 0; padding: 8px 12px; font-size: 13px; line-height: 1.45; color: #7a4b0e; background: #fdf3e1; border-radius: 10px; }
@media (max-width: 640px) {
    .bbp-contact .bbp-card-meta, .bbp-contact-remind { margin-right: 0; }
    .bbp-card-actions { margin-right: 0; }
}

/* list search in the header (moved there by bbp-cards.js) */
.bbp-list-filter.bbp-list-filter-head { flex: 1 1 auto; max-width: 620px; margin: 0 16px 0 12px; flex-wrap: nowrap; }
.bbp-list-filter-head .bbp-list-search { flex: 1 1 200px; height: 40px; }
.bbp-list-filter-head .bbp-list-cat select { height: 40px; max-width: 190px; }
.bbp-list-filter-head .bbp-list-go { height: 40px; }
@media (max-width: 991px) { .bbp-list-filter.bbp-list-filter-head { display: none; } }

/* page switcher: pinned to the bottom of the list while scrolling */
.pagination-wrapper.bbp-pager {
    position: sticky !important; bottom: 12px; z-index: 20;
    width: max-content; max-width: calc(100% - 24px);
    margin: 24px auto 12px !important; padding: 6px 8px !important;
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid var(--bbp-line); border-radius: 16px;
    box-shadow: 0 8px 24px rgba(31, 35, 38, .1);
    backdrop-filter: blur(6px);
}
.bbp-pager .bbp-pager-info { flex: 0 0 auto; margin: 0 8px 0 6px; }
.bbp-seen-chips { max-width: 640px; margin: 0 auto 14px; }
.bbp-seen-chips { max-width: 640px; margin: 0 auto 14px; }
.bbp-seen-chips { align-items: center; }
.bbp-list-sort { margin: 0 auto 0 0; }
.bbp-list-sort select { height: 34px; padding: 0 12px 0 28px; font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7075' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") left 10px center no-repeat !important;
    border: 1px solid var(--bbp-line) !important; border-radius: 17px !important; -webkit-appearance: none; appearance: none; cursor: pointer; }
/* request excerpt in a contacts card */
.bbp-contact-ask { margin: 10px 52px 0 0; font-size: 14px; line-height: 1.5; color: var(--bbp-ink); }
.bbp-contact-ask span { color: #62676c; }
.bbp-contact-person small { font-size: 13.5px; font-weight: 600; color: var(--bbp-ink); }
@media (max-width: 640px) { .bbp-contact-ask { margin-right: 0; } }
/* request excerpt as a chat bubble */
.bbp-contact-ask { display: flex; margin: 12px 0 4px; }
.bbp-contact-ask.is-mine { justify-content: flex-end; }
.bbp-contact-ask.is-theirs { margin-right: 52px; }
.bbp-ask-bubble { max-width: 80%; padding: 9px 14px; font-size: 14.5px; line-height: 1.45; color: var(--bbp-ink); background: #edece9; border-radius: 16px; }
.bbp-contact-ask.is-theirs .bbp-ask-bubble { background: #f5f3ef; border-radius: 16px 4px 16px 16px; }
@media (max-width: 640px) { .bbp-contact-ask.is-theirs { margin-right: 0; } }
/* request bubble comes first in the card, the answer (person, price, contacts) below */
.bbp-contact-ask.is-theirs { margin-right: 0; }
.bbp-contact-ask { margin: 12px 0 2px; }
/* contact state lives in the footer row, first */
.bbp-meta-state { font-weight: 600; }
.bbp-meta-state.is-done { color: #2f7a2a; }
.bbp-meta-state.is-action { color: #13719f; }
.bbp-meta-state.is-refused { color: #62676c; }
.bbp-contact .bbp-contact-ask { margin-top: 4px; }

/* seller's contacts card: the client's request is plain text under the client's name (no bubble);
   the buyer's own request stays a bubble on top */
.bbp-contact-body { display: flex; flex-direction: column; }
.bbp-contact-body > .bbp-contact-ask.is-mine { order: 0; }
.bbp-contact-body > .bbp-contact-person { order: 1; }
.bbp-contact-body > .bbp-contact-ask.is-theirs { order: 2; }
.bbp-contact-body > .bbp-contact-links { order: 3; }
.bbp-contact-body > .bbp-contact-note { order: 4; }
.bbp-contact-body > .bbp-contact-remind { order: 5; }
.bbp-contact-body > .bbp-card-meta { order: 6; }
.bbp-contact-body > .bbp-contact-actions { order: 7; }
.bbp-contact-ask.is-theirs { margin: 6px 52px 0 0; }
.bbp-contact-ask.is-theirs .bbp-ask-bubble { max-width: none; padding: 0; font-size: 14.5px; color: var(--bbp-ink); background: transparent !important; border-radius: 0; }
@media (max-width: 640px) { .bbp-contact-ask.is-theirs { margin-right: 0; } }
.bbp-contact-ask.is-theirs .bbp-ask-bubble.bbp-ask-bubble { padding: 0 !important; }
.bbp-contact-chip.is-warn { color: #8a4a0e; background: #fdf3e1; border-color: #f1d9ad; }
.bbp-contact-chip.is-warn span { color: #fff; background: #d0781f; }
.bbp-contact-chip.is-warn.is-active { color: #fff; background: #d0781f; border-color: #d0781f; }
.bbp-seen-chips { gap: 6px; }
.bbp-seen-chips .bbp-contact-chip { padding: 0 11px; font-size: 13px; }
/* "Запити" count: the total in a quiet pill, a blue dot after it when some are new */
aside .count.bbp-count-total { position: relative; color: var(--bbp-ink) !important; background: #eceae4 !important; overflow: visible; }
aside .count.bbp-count-total.has-new::after {
    content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%; background: #229ed9; box-shadow: 0 0 0 2px var(--bbp-panel, #f3f1ea);
}
aside .count.bbp-count-total.has-new { margin-left: 6px; }
/* "нове" card: recolour its own border instead of an extra ring (the ring did not follow the rounded corners) */
.request.open-popup.bbp-is-new { box-shadow: 0 4px 20px rgba(31, 35, 38, .06) !important; border-color: #96cfeb !important; }
/* card parts follow the card's own rounding (header 9px / body 19px left gaps at the corners) */
.request.open-popup { overflow: hidden; }
.request.open-popup > .request-head { border-radius: 15px 15px 0 0 !important; background: transparent !important; }
.request.open-popup > .request-body,
.request.open-popup > .bbp-contact-body { border-radius: 0 0 15px 15px !important; background: transparent !important; }
/* chips and sort on one line with the cards' edges */
.bbp-seen-chips { max-width: 640px; }
.bbp-list-filter.bbp-list-filter-head { max-width: none; margin-left: 0; }
.bbp-seen-chips .bbp-list-sort { flex: 0 0 auto; width: auto !important; margin-right: auto; }
/* list chips stay under the fixed header while scrolling */
.bbp-seen-chips, .bbp-contact-chips {
    position: sticky; top: 59px; z-index: 15;
    padding: 8px 0; margin-top: 0;
    background: #faf9f5;
    box-shadow: 0 8px 8px -8px rgba(31, 35, 38, .08);
}

/* one-time hints (bbp-cards.js): the assistant's intro as a dismissible card */
#main .center > .blabla-comment.bbp-hint { padding: 16px 18px 14px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 16px; transition: opacity .2s, transform .2s; }
#main .center > .blabla-comment.bbp-hint.is-leaving { opacity: 0; transform: translateY(-6px); }
.bbp-hint-ok { display: inline-flex; align-items: center; height: 32px; margin-top: 10px; padding: 0 14px; font: 600 13px/1 "Inter", system-ui, sans-serif; color: #fff; background: var(--bbp-ink); border: 0; border-radius: 10px; cursor: pointer; }
.bbp-hint-ok:hover { background: #3a4045; }
.bbp-hint-ok { display: flex; width: max-content; }
.bbp-tip.bbp-hint { max-width: 640px; margin: 0 auto 14px; padding: 14px 18px 12px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 16px; }
.bbp-tip .text { font-family: var(--bbp-serif); font-size: 15.5px; line-height: 1.55; color: var(--bbp-ink); }
.bbp-tip .text::before { content: "BlaBlaPrice"; display: block; margin-bottom: 2px; font: 600 12px/1.4 "Inter", system-ui, sans-serif; color: #62676c; }
/* "new" marker: just a blue dot after the title, no pill, no card outline */
.bbp-new-dot { width: 8px; height: 8px; min-width: 8px; margin-right: 8px; padding: 0 !important; border-radius: 50%; background: #229ed9; font-size: 0; }
.bbp-new-dot::before { display: none; }
.request.open-popup.bbp-is-new { border-color: var(--bbp-line) !important; }
/* orange "outbid" count next to "Запити" in the seller menu */
.bbp-count-outbid { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-right: 6px; padding: 0 6px; font-size: 11.5px; font-weight: 700; color: #fff; background: #d0781f; border-radius: 10px; cursor: pointer; }

/* offer comment templates (under the composer, on the comment step) */
.bbp-templates { display: flex; flex-wrap: wrap; gap: 6px; width: calc(100% - 32px); max-width: 760px; margin: -6px auto 12px; }
.bbp-tpl { display: inline-flex; align-items: center; height: 30px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 15px; overflow: hidden; }
.bbp-tpl button { height: 100%; padding: 0 10px; font-size: 12.5px; color: var(--bbp-ink); background: none; border: 0; cursor: pointer; }
.bbp-tpl button:hover { background: #f0f2f5; }
.bbp-tpl .bbp-tpl-del { padding: 0 8px; color: #9a9ea3; border-right: 1px solid var(--bbp-line); }
.bbp-tpl-add { height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: #13719f; background: none; border: 1px dashed #b4def2; border-radius: 15px; cursor: pointer; }

/* =====================================================================
 * Mobile pass (<= 991px)
 * ===================================================================== */
@media (max-width: 991px) {
    /* the spacer under the fixed header had a 60px bottom margin -> big empty band */
    #main .center > .request.request-main { margin-bottom: 0 !important; }
    .bbp-contacts, .bbp-req2 { margin-top: 12px; }
    /* list chips: one horizontally scrollable row instead of 2-3 wrapped lines */
    .bbp-seen-chips, .bbp-contact-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; top: 99px; margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
    .bbp-seen-chips::-webkit-scrollbar, .bbp-contact-chips::-webkit-scrollbar { display: none; }
    .bbp-seen-chips > *, .bbp-contact-chips > * { flex: 0 0 auto; }
    .bbp-seen-chips .bbp-list-sort { margin-right: 4px; }
    /* list search stays above the list on phones */
    .bbp-list-filter { flex-wrap: nowrap; }
    .bbp-list-filter .bbp-list-cat { flex: 0 1 140px; min-width: 0; }
    .bbp-list-filter .bbp-list-cat select { width: 100%; max-width: none; }
    .bbp-list-search { flex: 1 1 auto; min-width: 0; }
    .bbp-list-go { flex: none; padding: 0 14px; }
    /* cards: tighter */
    .request.open-popup .request-body { padding-right: 12px; padding-left: 12px; }
    .bbp-card-meta { gap: 6px 10px; }
    .bbp-card-actions { width: 100%; }
    /* popup header status line fits one line */
    .popup-container.wide .request-head .from { font-size: 12px; }
}
.bbp-contact-person small { font-weight: 400 !important; }
.bbp-contact-price { font-weight: 700; color: var(--bbp-ink); }
.bbp-contact-offer { color: var(--bbp-muted); }
@media (max-width: 991px) {
    .bbp-seen-chips, .bbp-contact-chips { margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; }
}
.bbp-meta.bbp-meta-review { white-space: normal; color: var(--bbp-ink); }
.bbp-contact .bbp-card-meta { flex-direction: column; align-items: flex-start; }

.bbp-contact-person small .bbp-contact-price { display: inline; font-size: 13.5px; }
/* contact card footer: the other side's review on the left, mine on the right */
.bbp-contact .bbp-card-meta { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.bbp-contact .bbp-card-meta .bbp-meta-state { flex: 1 0 100%; }
.bbp-contact .bbp-card-meta .is-theirs { order: 1; max-width: 48%; }
.bbp-contact .bbp-card-meta .is-mine { order: 2; max-width: 48%; margin-right: auto; text-align: left; justify-content: flex-end; }
@media (max-width: 640px) {
    .bbp-contact .bbp-card-meta .is-theirs, .bbp-contact .bbp-card-meta .is-mine { max-width: 100%; flex: 1 0 100%; }
}
@media (max-width: 991px) {
    .bbp-seen-chips, .bbp-contact-chips { margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; }
}
/* phones: the search field gets the room ("Знайти" = the keyboard's search key) */
@media (max-width: 640px) {
    .bbp-list-filter .bbp-list-go { display: none; }
    .bbp-list-filter .bbp-list-cat { flex: 0 0 118px; }
    .bbp-list-filter .bbp-list-cat select { padding-right: 12px; font-size: 13px; }
}
/* my review excerpt as my own chat bubble (right), the other side's as plain text (left) */
.bbp-contact .bbp-card-meta .bbp-meta-review.is-mine { padding: 6px 12px; background: #edece9; border-radius: 14px; }
.bbp-contact .bbp-card-meta .bbp-meta-review.is-theirs { padding: 6px 0; }
/* reviews side by side on every screen: each takes half of the row */
.bbp-contact .bbp-card-meta .is-theirs,
.bbp-contact .bbp-card-meta .is-mine { flex: 0 0 calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; white-space: normal; overflow-wrap: anywhere; }
.bbp-contact .bbp-card-meta .is-mine { justify-content: flex-start; text-align: right; }
@media (max-width: 640px) {
    .bbp-contact .bbp-card-meta .is-theirs, .bbp-contact .bbp-card-meta .is-mine { flex: 0 0 calc(50% - 6px) !important; }
}
/* fix: two halves must fit with the gap; mine shrinks to its text and sits at the right edge */
.bbp-contact .bbp-card-meta { column-gap: 12px !important; row-gap: 8px !important; flex-wrap: wrap; }
.bbp-contact .bbp-card-meta .is-theirs { flex: 0 0 calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; align-items: flex-start; }
.bbp-contact .bbp-card-meta .is-mine { flex: 0 1 auto !important; max-width: calc(50% - 6px) !important; margin-right: auto !important; align-items: flex-start; }
.bbp-contact .bbp-card-meta .is-theirs .bbp-meta-dot, .bbp-contact .bbp-card-meta .is-mine .bbp-meta-dot { flex: none; margin-top: 5px; }
.bbp-contact .bbp-card-meta .bbp-meta-state { flex: 1 0 100% !important; }
@media (max-width: 640px) {
    .bbp-contact .bbp-card-meta .is-theirs { flex: 0 0 calc(50% - 6px) !important; }
    .bbp-contact .bbp-card-meta .is-mine { flex: 0 1 auto !important; }
}
/* own review: meta row under the bubble, right-aligned */
.message.bbp-own-review { flex-direction: column; align-items: flex-end; }
.message.bbp-own-review .bbp-own-review-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 6px 0 0 4px !important; }
.bbp-own-review-date { font-size: 12px; color: #62676c; }
.request-body .text-right .message.bbp-own-review .inner { margin-bottom: 0 !important; }
.bbp-seen-chips, .bbp-contact-chips { top: var(--bbp-head-h, 59px) !important; }
/* "Залишити відгук" sits in the right half, where my review will be */
.bbp-contact .bbp-card-meta .bbp-card-actions { order: 2; margin-right: auto; width: auto; }
.bbp-contact .bbp-card-meta .bbp-review-slot { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 12px; }
/* seller rating next to the name: "2 відгуки  ● 1  ● 1" (dot colour = positive / neutral / negative) */
.bbp-offer-reviews { display: inline-flex; align-items: center; gap: 8px; }
.bbp-rv { display: inline-flex; align-items: center; gap: 4px; margin: 0 !important; font-weight: 600; color: var(--bbp-ink); }
.bbp-rv i { width: 7px; height: 7px; border-radius: 50%; background: #c9a227; }
.bbp-rv.is-pos i { background: #3f9a37; }
.bbp-rv.is-neg i { background: #d0452f; }
/* buyer, open deal: "Не домовились" left, "Залишити відгук" right, one row */
.bbp-contact .bbp-card-meta .bbp-card-actions:has(.bbp-refuse-slot) { flex: 1 0 100%; display: flex; justify-content: space-between; margin-right: 0; }
.bbp-contact .bbp-refuse-slot { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 12px; }

/* ---------- contacts: call / write buttons with icons, aligned under the name ---------- */
.bbp-contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 52px 0 0; }
.bbp-contact-btn {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
    height: 36px; padding: 0 12px 0 14px;
    font-size: 14px; font-weight: 500; color: var(--bbp-ink) !important;
    background: #f5f3ef; border: 1px solid var(--bbp-line); border-radius: 12px;
    text-decoration: none !important;
}
.bbp-contact-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-contact-btn .bbp-icon { flex: none; color: #13719f; }
.bbp-contact-btn:hover { background: #f0f2f5; }
.bbp-contact-copy { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: #5c6166; background: transparent; border: 1px solid var(--bbp-line); border-radius: 12px; cursor: pointer; }
.bbp-contact-copy:hover { background: #f0f2f5; }
.bbp-contact-copy.is-done { color: #2f7a2a; border-color: #bfe0a8; }
/* one left edge for everything under the avatar */
.bbp-contact-ask.is-theirs, .bbp-contact .bbp-card-meta, .bbp-contact-note, .bbp-contact-remind { margin-right: 52px !important; }
@media (max-width: 640px) {
    .bbp-contact-links, .bbp-contact-ask.is-theirs, .bbp-contact .bbp-card-meta, .bbp-contact-note, .bbp-contact-remind { margin-right: 0 !important; }
    .bbp-contact-links { display: grid; grid-template-columns: 1fr 36px; }
    .bbp-contact-links .bbp-contact-btn { grid-column: 1; }
    .bbp-contact-links .bbp-contact-copy { grid-column: 2; grid-row: 1; }
}

/* ---------- top menu on phones (Запити / Контакти): a segmented control with icons ---------- */
@media (max-width: 991px) {
    #header .aside-menu { display: flex !important; width: calc(100% - 32px); margin: 6px 16px 0; padding: 4px; background: #efece6; border-radius: 14px; }
    #header .aside-menu ul { display: flex; width: 100%; gap: 4px; margin: 0; padding: 0; }
    #header .aside-menu li { flex: 1 1 0; list-style: none; }
    #header .aside-menu a.link {
        display: flex !important; align-items: center; justify-content: center; gap: 6px;
        height: 38px; margin: 0 !important; padding: 0 10px !important;
        font-size: 14px; font-weight: 600; color: #5c6166 !important;
        background: transparent !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
    }
    #header .aside-menu a.link::after, #header .aside-menu a.link::before { display: none !important; }
    #header .aside-menu a.link .icon { display: inline-flex !important; width: 18px; height: 18px; margin: 0; }
    #header .aside-menu a.link .icon svg { width: 18px; height: 18px; }
    #header .aside-menu a.link.active { color: var(--bbp-ink) !important; background: #fff !important; box-shadow: 0 1px 4px rgba(31, 35, 38, .12) !important; }
    #header .aside-menu a.link .count { margin-right: 2px; }
}
@media (max-width: 991px) {
    #header .aside-menu { box-sizing: border-box; width: auto !important; max-width: calc(100vw - 32px); right: 16px; left: 16px; }
    #header .aside-menu ul { min-width: 0; }
    #header .aside-menu a.link { min-width: 0; }
}
/* phones: the open drawer dims the page behind it (tap there to close) */
@media (max-width: 991px) {
    #aside-left.active { width: min(320px, 85vw) !important; box-shadow: 0 0 0 100vmax rgba(31, 35, 38, .35); }
    #aside-left:not(.active) { box-shadow: none; }
}
/* the header (with its share card) stays above the sticky list chips */
#header { z-index: 60 !important; }
.head-social .wrap.share-chat { z-index: 61; }
/* contacts chips: one line on desktop (scrolls sideways if it ever does not fit), a gap under them */
.bbp-contact-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px !important; margin-bottom: 4px !important; }
.bbp-contact-chips::-webkit-scrollbar { display: none; }
.bbp-contact-chips > * { flex: none; white-space: nowrap; }
.bbp-contact { scroll-margin-top: calc(var(--bbp-head-h, 59px) + 60px); }
/* sticky chips: no shadow; the band's background reaches 12px past the cards so their shadows do not peek out at the sides */
.bbp-seen-chips, .bbp-contact-chips { box-shadow: 12px 0 0 #faf9f5, -12px 0 0 #faf9f5 !important; }
/* chat popups: contact buttons sit under the name like the rest of the message */
.bbp-contact-links.is-chat { margin: 8px 0 0 !important; }
/* header "Категорії": a white pill like the search next to it, with a grid icon and a small chevron */
@media (min-width: 992px) {
    #header .head-main > .menu-button.h-991 {
        display: inline-flex !important; align-items: center; gap: 8px; flex: none;
        height: 48px; padding: 0 14px 0 12px !important;
        font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink) !important;
        background: #fff !important; border: 1px solid var(--bbp-line) !important; border-radius: 14px !important;
        white-space: nowrap;
    }
    #header .head-main > .menu-button.h-991::before {
        content: ""; width: 18px; height: 18px; flex: none; background: #229ed9;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    #header .head-main > .menu-button.h-991 svg { width: 14px !important; height: 14px !important; margin: 0 !important; opacity: .55; }
    #header .head-main > .menu-button.h-991:hover { background: #f0f2f5 !important; }
    #header .head-main > .header-search { height: 48px; box-sizing: border-box; border-radius: 14px !important; margin-right: 8px !important; }
}
@media (min-width: 641px) {
    /* they wrap (QA 2026-10-05: a narrow chat beside the list cut the phone number) */
    .bbp-contact-links.is-chat { flex-wrap: wrap; }
    .message .inner:has(> .bbp-contact-links.is-chat) { max-width: none !important; }
}
/* the search alignment (bbp-cards.js) measures positions: no animated margins/widths here */
#header .head-main > .menu-button, #header .head-main > .header-search { transition: background-color .15s, border-color .15s, box-shadow .15s !important; }
/* phones: #vue-app is the scroller; #main must not be a second scroll box, or the sticky chips never stick */
@media (max-width: 991px) {
    #main { overflow-x: clip !important; overflow-y: visible !important; }
}

/* ---------- phones: list search in the header, category as the first pill of the sticky chips ---------- */
@media (max-width: 991px) {
    #header .head-main > .bbp-list-filter.bbp-list-filter-mob { display: flex !important; flex: 1 1 auto; min-width: 0; margin: 0 8px !important; padding: 0; gap: 0; }
    .bbp-list-filter-mob .bbp-list-search { flex: 1 1 auto; height: 40px; padding: 0 12px; }
    .bbp-list-filter-mob .bbp-list-search input { height: 38px; font-size: 16px; }
    .bbp-list-filter-mob .bbp-list-go, .bbp-list-filter-mob .bbp-list-cat { display: none !important; }
    .bbp-seen-chips > .bbp-list-cat, .bbp-contact-chips > .bbp-list-cat { flex: none; margin: 0; }
    .bbp-seen-chips > .bbp-list-cat select, .bbp-contact-chips > .bbp-list-cat select {
        width: auto; max-width: 150px; height: 34px; padding: 0 12px 0 28px;
        font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); text-overflow: ellipsis;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7075' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") left 10px center no-repeat !important;
        border: 1px solid var(--bbp-line) !important; border-radius: 17px !important; -webkit-appearance: none; appearance: none;
    }
    /* a chosen category reads as an active filter */
    .bbp-seen-chips > .bbp-list-cat select:has(option:checked:not([value=""])) { color: #13719f; border-color: #99d0ea !important; }
}
/* phones: the page switcher is fixed to the bottom of the screen whatever element scrolls */
@media (max-width: 991px) {
    .pagination-wrapper.bbp-pager {
        position: fixed !important; right: 50%; left: auto; bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        transform: translateX(50%); margin: 0 !important; z-index: 25;
    }
}
/* phones: the Запити / Контакти tabs span the screen minus 16px gutters (an inherited min-width: 100% pushed them past the right edge) */
@media (max-width: 991px) {
    #header .aside-menu { width: auto !important; min-width: 0 !important; max-width: none; box-sizing: border-box; }
}
/* the page title repeats the big heading below; the header gives its place to the list search */
#header .head-main:has(> .bbp-list-filter-head) > .title,
#header .head-main:has(> .bbp-list-filter-mob) > .title { display: none !important; }
/* contacts chips: compact like the request chips so all four fit the 640px column */
.bbp-contact-chips:not(.bbp-seen-chips) { gap: 6px; }
.bbp-contact-chips:not(.bbp-seen-chips) .bbp-contact-chip { padding: 0 11px; font-size: 13px; }
/* phone tabs: the same count format as the left sidebar (grey number, blue dot for new / waiting) */
@media (max-width: 991px) {
    #header .aside-menu a.link .count.bbp-count-total { color: var(--bbp-ink) !important; background: #e3e0d9 !important; }
    #header .aside-menu a.link.active .count.bbp-count-total { background: #eceae4 !important; }
    #header .aside-menu a.link .count.bbp-count-total.has-new { margin-left: 8px; }
}
#header .aside-menu .count.bbp-count-total { position: relative; overflow: visible; }
#header .aside-menu .count.bbp-count-total.has-new::after {
    content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%; background: #229ed9; box-shadow: 0 0 0 2px #efece6;
}
#header .aside-menu a.link.active .count.bbp-count-total.has-new::after { box-shadow: 0 0 0 2px #fff; }
/* list search: our clear button (resets the word filter) instead of the browser's own "x" */
.bbp-list-search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.bbp-list-clear {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin-left: -4px; padding: 0;
    color: #fff; background: #9a9ea3; border: 0; border-radius: 50%; cursor: pointer;
}
.bbp-list-clear .bbp-icon { stroke-width: 2.5; }
.bbp-list-search input:placeholder-shown ~ .bbp-list-clear:not([data-applied]) { display: none; }
.bbp-list-clear:hover { background: #5c6166; }
/* card quick actions stay on the right, also when they wrap to their own line on phones */
.bbp-card-meta > .bbp-card-actions { margin-right: auto !important; }
.bbp-card-meta > .bbp-card-actions { justify-content: flex-end; }

/* ---------- phones: card actions share the row with the deadline on the left (wrap only when they do not fit) ---------- */
@media (max-width: 991px) {
    .bbp-card-meta > .bbp-card-actions { width: auto !important; }
}

/* ---------- phones: one calm header for every role — 12px gutters, plain 40px icon buttons, a white pill search ---------- */
@media (max-width: 991px) {
    #header { box-shadow: none !important; border-bottom: 1px solid rgba(31, 35, 38, .07); }
    #header .head-main { box-sizing: border-box; padding: 0 12px !important; gap: 4px; align-items: center; }
    #header .head-main > .btn-aside {
        flex: none; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important;
        display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 12px !important;
    }
    #header .head-main > .btn-aside span { display: block; width: 18px !important; height: 2px !important; margin: 0 !important; background: var(--bbp-ink) !important; border-radius: 1px; position: static !important; transform: none !important; }
    #header .head-main > .header-search {
        flex: 1 1 auto; min-width: 0; width: auto !important; height: 40px !important; margin: 0 4px !important; box-sizing: border-box;
        background: #fff !important; border: 1px solid var(--bbp-line) !important; border-radius: 20px !important;
    }
    #header .head-main > .header-search::after { display: none !important; }
    #header .head-main > .header-search::before {
        content: ""; position: absolute; right: 14px; top: 50%; z-index: 1; width: 17px; height: 17px; transform: translateY(-50%); pointer-events: none;
        background: #62676c;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    #header .head-main > .header-search input { height: 38px !important; padding: 0 40px 0 14px !important; font-size: 16px !important; }
    #header .head-main > .bbp-list-filter.bbp-list-filter-mob { margin: 0 4px !important; }
    .bbp-list-filter-mob .bbp-list-search { border-radius: 20px !important; }
    #header .head-main > .bbp-theme-toggle,
    #header .head-main > a.filter-button,
    #header .head-main > .head-social {
        flex: none; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important;
        display: inline-flex !important; align-items: center; justify-content: center;
        background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important;
    }
    #header .head-main > a.filter-button svg { width: 18px !important; height: 18px !important; margin: 0 !important; fill: var(--bbp-ink) !important; }
    /* guests have no share button: no empty slot on the right */
    #header .head-main > .head-social:not(:has(> button:not(.close-nav))) { display: none !important; }
    .active-nav #header .head-main > .head-social { display: inline-flex !important; }
    #header .aside-menu { margin-top: 6px !important; }
    /* the header is fixed: the page starts right under it (a 60px margin + 60px spacer + 40px gap left a hole) */
    #main .center > .request.request-main { margin-top: 0 !important; height: calc(var(--bbp-head-h, 108px) + 4px) !important; min-height: 0 !important; }
    #main .center > .request.request-main + .empty-space-40 { display: none !important; }
}

/* ---------- phones, light theme: a warmer canvas under the cards ---------- */
@media (max-width: 991px) {
    html:not([data-theme="dark"]) body,
    html:not([data-theme="dark"]) #main,
    html:not([data-theme="dark"]) #header,
    html:not([data-theme="dark"]) .bbp-seen-chips,
    html:not([data-theme="dark"]) .bbp-contact-chips { background-color: #f3f1ea !important; }
    html:not([data-theme="dark"]) .bbp-seen-chips,
    html:not([data-theme="dark"]) .bbp-contact-chips { box-shadow: 12px 0 0 #f3f1ea, -12px 0 0 #f3f1ea !important; }
}

/* ---------- sections vs filters: Запити / Контакти are tabs (underline), list filters are light chips (blue when on) ---------- */
@media (max-width: 991px) {
    #header { padding-bottom: 0 !important; }
    #header .aside-menu { margin: 4px 0 0 !important; padding: 0 12px !important; right: 0; left: 0; max-width: none !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
    #header .aside-menu ul { gap: 0 !important; padding: 0 !important; }
    #header .aside-menu a.link {
        height: 44px !important; position: relative; gap: 8px;
        color: #62676c !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
    }
    #header .aside-menu a.link .icon { opacity: .6; }
    #header .aside-menu a.link.active { color: var(--bbp-ink) !important; background: transparent !important; box-shadow: none !important; }
    #header .aside-menu a.link.active .icon { opacity: 1; }
    #header .aside-menu a.link.active::after {
        content: "" !important; display: block !important; position: absolute; right: 12px; left: 12px; bottom: -1px; top: auto;
        width: auto !important; height: 3px !important; margin: 0 !important; background: #229ed9 !important; border-radius: 3px 3px 0 0 !important; transform: none !important; opacity: 1 !important;
    }
    #header .aside-menu a.link .count.bbp-count-total { background: #e6e2da !important; }
    #header .aside-menu a.link.active .count.bbp-count-total { color: #fff !important; background: #229ed9 !important; }
    #header .aside-menu a.link.active .count.bbp-count-total.has-new::after { box-shadow: 0 0 0 2px #f3f1ea; }
}
.bbp-contact-chip { height: 32px; color: #4d5257; background: transparent; border-color: #d9d5cc; }
.bbp-contact-chip span { min-width: 0; padding: 0; color: #62676c; background: transparent; }
.bbp-contact-chip:hover { color: var(--bbp-ink); border-color: #bfbab0; }
.bbp-contact-chip.is-active { color: #13719f; background: #e2f2fa; border-color: #a5d6ee; }
.bbp-contact-chip.is-active span { color: #13719f; background: transparent; }
.bbp-contact-chip.has-action:not(.is-active) span { min-width: 18px; padding: 1px 5px; color: #fff; background: #229ed9; }
.bbp-seen-chips > .bbp-list-cat select, .bbp-contact-chips > .bbp-list-cat select { height: 32px !important; background-color: transparent !important; border-color: #d9d5cc !important; }

/* ---------- phones: the side menu — one type scale (15px), one rhythm (48px rows, 14px icon gap), roomier head and foot ---------- */
@media (max-width: 991px) {
    #aside-left.active { width: min(86vw, 340px) !important; box-shadow: 0 0 0 100vmax rgba(31, 35, 38, .35), -8px 0 32px rgba(31, 35, 38, .18) !important; }
    #aside-left > .wrap { width: 100% !important; box-sizing: border-box; padding: 0 12px calc(12px + env(safe-area-inset-bottom)) !important; }
    #aside-left .head { height: 64px !important; padding: 0 8px 0 0 !important; align-items: center; justify-content: space-between; }
    #aside-left .head .logo { width: auto !important; }
    #aside-left .head .logo img { height: 26px !important; width: auto !important; }
    #aside-left .head .btn-aside-close {
        display: inline-flex !important; align-items: center; justify-content: center; flex: none;
        width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: rgba(31, 35, 38, .06) !important;
    }
    #aside-left .head .btn-aside-close svg { width: 14px !important; height: 14px !important; }
    #aside-left .aside-menu { margin: 8px 0 0 !important; padding: 0 !important; }
    #aside-left .aside-menu ul { padding: 0 !important; display: flex; flex-direction: column; gap: 2px; }
    #aside-left .aside-menu a.link {
        height: 48px !important; padding: 0 12px !important; gap: 14px !important; justify-content: flex-start !important;
        font: 600 15px/1.2 "Inter", system-ui, sans-serif !important; letter-spacing: 0 !important; color: var(--bbp-ink) !important; border-radius: 14px !important;
    }
    #aside-left .aside-menu a.link:not(.active) { font-weight: 500 !important; }
    #aside-left .aside-menu a.link .icon { width: 22px !important; height: 22px !important; margin: 0 !important; justify-content: center; }
    #aside-left .aside-menu a.link .icon svg { width: 20px !important; height: 20px !important; }
    #aside-left .aside-menu a.link > span { margin: 0 !important; font: inherit !important; }
    #aside-left .aside-menu a.link .count { margin-right: auto !important; }
    #aside-left .foot { gap: 10px; padding: 0 !important; }
    #aside-left .foot > ul { width: 100%; box-sizing: border-box; margin: 0 !important; padding: 6px !important; border-radius: 16px !important; }
    #aside-left .foot > ul li a,
    #aside-left .foot > ul li button {
        width: 100%; height: 46px !important; padding: 0 10px !important; gap: 14px !important; justify-content: flex-start !important; box-sizing: border-box;
        font: 500 15px/1.2 "Inter", system-ui, sans-serif !important; color: var(--bbp-ink) !important; border-radius: 12px !important; text-align: right;
    }
    #aside-left .foot > ul li svg { width: 20px !important; height: 20px !important; margin: 0 !important; flex: none; opacity: .7; }
    #aside-left .foot > ul li span { margin: 0 !important; font: inherit !important; }
    #aside-left .foot > .link-btn { width: 100%; box-sizing: border-box; margin: 0 !important; min-height: 56px; padding: 8px 10px 8px 14px !important; gap: 12px; border-radius: 16px !important; }
    #aside-left .foot > .link-btn .avatar { width: 38px !important; height: 38px !important; margin: 0 !important; flex: none; }
    #aside-left .foot > .link-btn span { margin: 0 !important; font: 600 15px/1.2 "Inter", system-ui, sans-serif !important; color: var(--bbp-ink) !important; }
    #aside-left .wrap > .links { display: flex; width: 100%; box-sizing: border-box; margin: 0 !important; padding: 4px 10px calc(14px + env(safe-area-inset-bottom)) !important; gap: 6px 14px !important; flex-wrap: wrap; }
    #aside-left .wrap > .links a { margin: 0 !important; font: 500 12.5px/1.4 "Inter", system-ui, sans-serif !important; color: #62676c !important; }
}
@media (max-width: 991px) {
    .bbp-contacts-title { margin-bottom: 12px !important; }
}
@media (max-width: 991px) {
    /* "Контакти <span>клієнтів</span>": the flex gap must not widen the space between the two words */
    #aside-left .aside-menu a.link > span { margin-right: -9px !important; }
}

/* ---------- new request: the composer is docked to the bottom of the screen, like a chat ---------- */
.bbp-req2 { display: flex; flex-direction: column; min-height: calc(100dvh - 120px); margin-bottom: 0 !important; }
.bbp-req2 .bbp-note-inline { margin-top: 0; }
.bbp-req2 .bbp-req-example { margin-top: 20px; padding-top: 0; border-top: 0; }
.bbp-req-dock {
    --bbp-dock-bg: #faf9f5;
    position: sticky; bottom: 0; z-index: 20;
    margin-top: auto; padding: 22px 0 calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, transparent, var(--bbp-dock-bg) 22px);
}
.bbp-dock-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.bbp-req-dock .bbp-composer { margin-top: 0; padding: 14px 18px 12px 14px; }
.bbp-req-dock .bbp-composer-text { min-height: 52px !important; }
.bbp-req-dock .bbp-composer-bar { margin-top: 0; }
.bbp-req-dock .bbp-suggest { margin-top: 10px; }
@media (max-width: 991px) {
    .bbp-req2 { min-height: calc(100dvh - var(--bbp-head-h, 64px) - 12px); }
    .bbp-req-dock { padding-top: 18px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    html:not([data-theme="dark"]) .bbp-req-dock { --bbp-dock-bg: #f3f1ea; }
    /* one line each, scrolled sideways: the dock stays low */
    .bbp-dock-opts, .bbp-req-dock .bbp-suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; margin-left: -12px; padding: 0 12px; }
    .bbp-dock-opts::-webkit-scrollbar, .bbp-req-dock .bbp-suggest::-webkit-scrollbar { display: none; }
    .bbp-dock-opts > *, .bbp-req-dock .bbp-suggest > * { flex: none; white-space: nowrap; }
    .bbp-dock-opts { margin-bottom: 8px; }
    .bbp-req-dock .bbp-suggest { margin-top: 8px; }
    .bbp-req-dock .bbp-composer-text { font-size: 16px !important; }
}
.bbp-req2 > * { flex: none; }
.bbp-req2 > .bbp-req-dock { margin-top: auto; }
@media (max-width: 991px) {
    /* the old theme clipped this page (overflow hidden + 150px bottom padding): let it scroll, the dock sits on the screen edge */
    #main .center.page-filter { overflow: visible !important; height: auto !important; min-height: 100%; padding-bottom: 0 !important; }
}

/* ---------- new request: intro + example as a two-slide slider (like the home page) ---------- */
.bbp-req2 .bbp-req-head { margin-bottom: 0; }
.bbp-req-slider { margin-top: 12px; }
.bbp-req-slider .bbp-slide { box-sizing: border-box; }
.bbp-slide-intro { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 26px 22px; }
.bbp-slide-intro .bbp-title { margin: 0; }
.bbp-slide-intro .bbp-subtitle { margin: 0; }
.bbp-slide-intro .bbp-note-inline { flex: none; margin-top: auto !important; padding-top: 14px; }
.bbp-req-slider .bbp-slider-nav { margin-top: 12px; }
@media (max-width: 991px) {
    .bbp-slide-intro { padding: 22px 18px 18px; }
}
.bbp-req-steps { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.bbp-req-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--bbp-ink); }
.bbp-req-steps b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 13px; color: #13719f; background: #e2f2fa; border-radius: 50%; }
.bbp-req2 { min-height: 0; }

/* ---------- language: no fixed footer bar; the country pill lives in the side menu head ---------- */
footer.footer { display: none !important; }
@media (max-width: 991px) {
    #aside-left .head #lang {
        display: inline-flex !important; align-items: center; gap: 6px; flex: none;
        height: 36px; margin: 0 auto 0 8px !important; padding: 0 10px 0 12px; position: static; top: auto;
        font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink) !important;
        background: rgba(31, 35, 38, .06); border-radius: 18px;
    }
    #aside-left .head #lang::before {
        content: ""; width: 16px; height: 16px; flex: none; background: currentColor; opacity: .7;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}
/* new request page: no spare space under the docked composer (old 120px page padding + 60px form margin) */
#main .center.page-filter:has(.bbp-req2) { padding-bottom: 0 !important; }
#main .center.page-filter .request-main.bbp-form-page:has(.bbp-req2) { margin-bottom: 0 !important; }

/* ---------- offer composer: more contrast on the white chat — firmer card, blue focus ring, a round action button ---------- */
.popup-container.wide .tab-answer .input-group.bbp-steps::before {
    border: 1.5px solid #d3cec4 !important; border-radius: 22px !important;
    box-shadow: 0 1px 2px rgba(31, 35, 38, .04), 0 10px 30px rgba(31, 35, 38, .10) !important;
}
.popup-container.wide .tab-answer .input-group.bbp-steps:focus-within::before {
    border-color: #229ed9 !important; box-shadow: 0 0 0 4px rgba(34, 158, 217, .14), 0 10px 30px rgba(31, 35, 38, .10) !important;
}
.popup-container.wide .tab-answer .input-group.bbp-steps input.input::placeholder,
.popup-container.wide .tab-answer .input-group.bbp-steps textarea.input::placeholder { color: #5c6166 !important; opacity: 1; font-weight: 500 !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) input.input { font-size: 17px !important; color: var(--bbp-ink); }
.popup-container.wide .tab-answer .input-group.bbp-steps .popup-send,
.popup-container.wide .tab-answer .input-group.bbp-steps .popup-send.blue,
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-ready:not(.bbp-step-comment) .bbp-add-comment {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important;
    color: #fff !important; background: #229ed9 !important; border-radius: 50% !important; opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(34, 158, 217, .30); transition: background-color .15s, transform .1s;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .popup-send svg { width: 17px !important; height: 17px !important; fill: #fff !important; margin: 0 2px 0 0 !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps .popup-send:active,
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-add-comment:active { transform: scale(.94); }
/* nothing to send yet: the same round button, quiet */
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment):not(.bbp-ready) .popup-send,
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(.bbp-has-comment) .popup-send {
    display: inline-flex !important; background: #ecebe6 !important; box-shadow: none;
}
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment):not(.bbp-ready) .popup-send svg,
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(.bbp-has-comment) .popup-send svg { fill: #a3a7ab !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-add-comment,
.popup-container.wide .tab-answer .input-group.bbp-steps .popup-send { margin: 0 0 8px 8px !important; }
/* "Додати фото": a light pill under the card */
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded label.input-file {
    height: 32px !important; margin: 10px 2px 0 0 !important; padding: 0 9px 0 12px !important;
    font-weight: 600; color: var(--bbp-ink) !important; background: #f3f1ea !important; border-radius: 16px !important;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .list-files-uploaded label.input-file:hover { background: #f0f2f5 !important; }
/* "+ коментар" is a word, not an icon: a blue pill */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-ready:not(.bbp-step-comment) .bbp-add-comment {
    width: auto !important; min-width: 0 !important; padding: 0 16px !important; border-radius: 20px !important;
    font: 600 14px/1 "Inter", system-ui, sans-serif; white-space: nowrap;
}

/* ---------- new request: title, the service's advantages, "Показати приклад" ---------- */
.bbp-req-intro { margin-top: 10px; }
.bbp-req-intro .bbp-title { margin: 0 0 8px; }
.bbp-req-intro .bbp-subtitle { margin: 0; }
.bbp-req-perks { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.bbp-req-perks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: #4d5257; }
.bbp-req-perks b { font-weight: 600; color: var(--bbp-ink); }
.bbp-perk-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: -4px; color: #13719f; background: #e2f2fa; border-radius: 10px; }
.bbp-perk-ic .bbp-icon, .bbp-perk-ic svg { width: 17px; height: 17px; }
.bbp-example-toggle {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; margin: 20px 0 0; padding: 0 16px;
    font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink);
    background: #fff; border: 1px solid #d3cec4; border-radius: 19px; cursor: pointer;
}
.bbp-example-toggle svg { transition: transform .2s; }
.bbp-example-toggle[aria-expanded="true"] svg { transform: rotate(-180deg); }
.bbp-req-intro .bbp-req-example { margin: 14px 0 0; padding: 0; border: 0; }
.bbp-req-intro .bbp-req-example[hidden] { display: none; }
@media (max-width: 991px) {
    .bbp-req-perks li { font-size: 14.5px; }
}

/* ---------- full-test fixes (2026-09-28) ---------- */
/* the floating page switcher never covers the last card */
#main .center:has(.pagination-wrapper.bbp-pager) { padding-bottom: 120px !important; }
/* request form chips: the inner select / input paint no box of their own */
.bbp-req-dock .bbp-chip select, .bbp-req-dock .bbp-chip input { background-color: transparent !important; box-shadow: none !important; border: 0 !important; }
/* the paper plane takes the button's text colour */
.bbp-req-dock .bbp-composer-send .bbp-btn-primary svg, .bbp-req-dock .bbp-composer-send .bbp-btn-primary .bbp-icon { color: currentColor; fill: currentColor; stroke: currentColor; opacity: 1; }

/* ---------- settings: cards in the page gutter, compact rows, a real page title ---------- */
.page-settings > h2.heading { display: block !important; margin: 18px 4px 4px !important; padding: 0 !important; font: 500 30px/1.2 var(--bbp-serif) !important; color: var(--bbp-ink) !important; text-align: right !important; }
.page-settings .accordeon-settings { margin: 14px 0 16px !important; padding: 0 !important; background: transparent !important; list-style: none; }
.page-settings .accordeon-settings .item-accordeon { margin: 0 0 10px !important; padding: 0 !important; background: #fff; border: 1px solid var(--bbp-line); border-radius: 16px !important; box-shadow: none !important; overflow: hidden; }
.page-settings .accordeon-settings .btn-accordeon { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px !important; min-height: 0 !important; }
.page-settings .accordeon-settings .btn-accordeon span { flex: 1; text-align: right !important; margin: 0 !important; font: 600 16px/1.3 "Inter", system-ui, sans-serif !important; }
.page-settings .accordeon-settings .inner-accordeon { padding: 0 20px 20px !important; }
.page-settings .accordeon-settings .text-small { font-size: 13.5px !important; line-height: 1.45; color: #5c6166 !important; }
.page-settings > h2.heading { text-transform: none !important; letter-spacing: 0 !important; }
/* pages without a search in the header: the icons keep to the right edge */
@media (max-width: 991px) {
    #header .head-main { justify-content: space-between; }
}
@media (max-width: 991px) {
    #header .head-main > .bbp-theme-toggle { margin-right: auto !important; }
}
/* reputation line next to a name: small, muted, numbers coloured */
.bbp-rep { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin-right: 8px; font: 500 12.5px/1.4 "Inter", system-ui, sans-serif; color: #62676c; white-space: normal; }
.bbp-rep b { font-weight: 700; }
.bbp-rep b.is-pos { color: #2e8b57; }
.bbp-rep b.is-neu { color: #62676c; }
.bbp-rep b.is-neg { color: #c0392b; }
.name-reviews .bbp-rep, .name-reviews .bbp-rep b { font-size: 12.5px !important; line-height: 1.4 !important; }
/* chip rows: a soft fade shows there is more to scroll */
@media (max-width: 991px) {
    .bbp-seen-chips.bbp-more-right, .bbp-contact-chips.bbp-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
    .bbp-seen-chips.bbp-more-left.bbp-more-right, .bbp-contact-chips.bbp-more-left.bbp-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
    .bbp-seen-chips.bbp-more-left:not(.bbp-more-right), .bbp-contact-chips.bbp-more-left:not(.bbp-more-right) { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
}
/* phones: the in-page list search keeps most of the row; the category select is compact */
@media (max-width: 575px) {
    .bbp-list-filter:not(.bbp-list-filter-mob) .bbp-list-cat { flex: 0 0 auto; max-width: 42%; }
    .bbp-list-filter:not(.bbp-list-filter-mob) .bbp-list-cat select { max-width: 100%; text-overflow: ellipsis; }
}

/* ---------- seller filter page: standard header, serif title, sticky save bar ---------- */
.seller-filter .bbp-filter-intro { margin: 12px 4px 16px !important; }
.seller-filter .bbp-filter-intro .bbp-title { margin: 0 0 8px !important; font: 500 28px/1.2 var(--bbp-serif) !important; color: var(--bbp-ink) !important; }
.seller-filter .bbp-filter-intro p { margin: 0; font-size: 15px; line-height: 1.5; color: #5c6166; }
.seller-filter > form > .accordeon { border-radius: 18px !important; overflow: hidden; }
.bbp-filter-actions {
    position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 16px 0 0; padding: 10px 16px 10px 10px;
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--bbp-line); border-radius: 20px; box-shadow: 0 8px 28px rgba(31, 35, 38, .12);
}
.bbp-filter-actions .bbp-filter-clear { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 "Inter", system-ui, sans-serif; color: #5c6166; text-decoration: none; }
.bbp-filter-actions .bbp-filter-clear svg { width: 14px; height: 16px; fill: currentColor; opacity: .8; }
.bbp-filter-actions .bbp-filter-save { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: 14px; cursor: pointer; }
.bbp-filter-actions .bbp-filter-save svg { width: 16px; height: 16px; fill: currentColor; }
.bbp-filter-actions .bbp-filter-save span { font: 600 15px/1 "Inter", system-ui, sans-serif; }
@media (max-width: 991px) {
    .seller-filter .request.request-main { margin-top: 0 !important; height: calc(var(--bbp-head-h, 108px) + 4px) !important; min-height: 0 !important; }
}
.bbp-filter-actions .bbp-filter-save { margin: 0 !important; }

/* ---------- request composer = the seller's reply composer: firm card, blue focus ring, details inside the card ---------- */
.bbp-req-dock .bbp-composer {
    padding: 14px 18px 12px 12px !important; background: #fff;
    border: 1.5px solid #d3cec4 !important; border-radius: 22px !important;
    box-shadow: 0 1px 2px rgba(31, 35, 38, .04), 0 10px 30px rgba(31, 35, 38, .10) !important;
}
.bbp-req-dock .bbp-composer:focus-within { border-color: #229ed9 !important; box-shadow: 0 0 0 4px rgba(34, 158, 217, .14), 0 10px 30px rgba(31, 35, 38, .10) !important; }
.bbp-req-dock .bbp-composer-text::placeholder { color: #5c6166; opacity: 1; }
.bbp-req-dock .bbp-composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px !important; }
.bbp-req-dock .bbp-composer-bar .bbp-chip { height: 34px; background: #f3f1ea; }
.bbp-req-dock .bbp-composer-bar .bbp-chip:hover { background: #f0f2f5; }
.bbp-req-dock .bbp-composer-send { margin-right: auto; }
.bbp-req-dock .bbp-composer-send .bbp-btn-primary { height: 40px; padding: 0 18px; color: #fff; background: #229ed9 !important; border-radius: 20px !important; box-shadow: 0 4px 12px rgba(34, 158, 217, .30); }
.bbp-req-dock .bbp-composer-send .bbp-btn-primary:active { transform: scale(.97); }
@media (max-width: 575px) {
    .bbp-req-dock .bbp-composer-bar .bbp-chip { flex: 0 1 auto; }
    .bbp-req-dock .bbp-composer-bar .bbp-chip input { width: 92px; }
    .bbp-req-dock .bbp-composer-bar .bbp-chip select { max-width: 150px; }
    .bbp-req-dock .bbp-composer-send { flex: 1 0 100%; }
    .bbp-req-dock .bbp-composer-send .bbp-btn-primary { width: 100%; justify-content: center; }
}
.bbp-req-perks { gap: 8px; }
.bbp-req-perks li { align-items: center; font-weight: 500; color: var(--bbp-ink); }
.bbp-req-perks .bbp-perk-ic { margin-top: 0; }
@media (max-width: 575px) {
    .bbp-req-dock .bbp-composer-bar .bbp-chip input { width: 118px; }
}
.bbp-req-dock .bbp-composer-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.bbp-req-dock .bbp-composer-opts .bbp-chip { height: 34px; background: #f3f1ea; }
.bbp-req-dock .bbp-composer-opts .bbp-chip:hover { background: #f0f2f5; }
.bbp-req-dock .bbp-composer-bar { justify-content: flex-end; }
@media (max-width: 575px) {
    .bbp-req-dock .bbp-composer-opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -12px; padding-left: 12px; }
    .bbp-req-dock .bbp-composer-opts::-webkit-scrollbar { display: none; }
    .bbp-req-dock .bbp-composer-opts .bbp-chip { flex: none; }
    .bbp-req-dock .bbp-composer-opts .bbp-chip input { width: 110px; }
}
@media (max-width: 575px) {
    .bbp-req-dock .bbp-composer-opts { flex-wrap: wrap; overflow: visible; margin-left: 0; padding-left: 0; gap: 6px; }
    .bbp-req-dock .bbp-composer-opts .bbp-chip { height: 32px; padding: 0 10px 0 4px; }
    .bbp-req-dock .bbp-composer-opts .bbp-chip select { max-width: 132px; font-size: 13.5px; }
    .bbp-req-dock .bbp-composer-opts .bbp-chip input { width: 96px; font-size: 13.5px; }
}
/* request texts keep the buyer's line breaks (details are added one per line) */
.message .comment, .message .inner > .text, .bbp-slide-bubble { white-space: pre-line; }
/* legal pages: the card starts under the header, lists have bullets */
.page-contact.request-main { margin-top: 12px !important; }
.page-contact .contract ul { list-style: disc; padding-right: 22px !important; margin-right: 0 !important; }
.page-contact .contract ul li { display: list-item !important; margin: 0 0 6px !important; padding-right: 2px !important; }
.page-contact .contract ul li::marker { color: #9a9ea3; }

/* ---------- error pages ---------- */
.bbp-error { max-width: 560px; margin: 48px auto 0; padding: 36px 28px 30px; text-align: center; background: #fff; border: 1px solid var(--bbp-line); border-radius: 22px; }
.bbp-error-code { font: 600 56px/1 var(--bbp-serif); color: #c9c4ba; letter-spacing: 2px; }
.bbp-error .bbp-title { margin: 14px 0 10px !important; font: 500 28px/1.2 var(--bbp-serif) !important; color: var(--bbp-ink); }
.bbp-error p { margin: 0 auto 22px; max-width: 420px; font: 400 15.5px/1.55 "Inter", system-ui, sans-serif; color: #5c6166; }
.bbp-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bbp-error .menu-button.bbp-error-main { display: inline-flex !important; align-items: center; height: 44px; padding: 0 22px !important; margin: 0 !important; font: 600 15px/1 "Inter", system-ui, sans-serif !important; color: #fff !important; background: #229ed9 !important; border: 0 !important; border-radius: 22px !important; cursor: pointer; }
.bbp-error .menu-button.bbp-error-main::before, .bbp-error .menu-button.bbp-error-main::after { display: none !important; }
.bbp-error-home { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; font: 600 15px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); text-decoration: none; background: #f3f1ea; border-radius: 22px; }
@media (max-width: 991px) { .bbp-error { margin: calc(var(--bbp-head-h, 64px) + 16px) 4px 0; } }
@media (max-width: 991px) { .bbp-error { margin: 16px 4px 0 !important; } }
/* pricing: one badge colour pair, the featured plan keeps a blue frame, buttons on one line */
.bbp-plan .bbp-badge { color: #13719f !important; background: #e2f2fa !important; }
.bbp-plan.is-featured { border: 2px solid #229ed9 !important; }
.bbp-plan .bbp-plan-btn { white-space: nowrap; }
.bbp-balance-card { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px; font: 500 15px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #e2f2fa; border-radius: 16px; }
.bbp-balance-card b { font-weight: 700; }
.bbp-balance-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; color: #13719f; background: #fff; border-radius: 10px; }
/* phones: pages whose header placeholder is .request-head (legal, pricing, settings...) leave room for the whole header */
@media (max-width: 991px) {
    #main .center > .request-head:first-child { height: calc(var(--bbp-head-h, 64px) + 4px) !important; padding: 0 !important; }
}

/* ---------- second review round ---------- */
.page-contact .contract ul > li { list-style: disc outside !important; }
.bbp-plan.is-featured { box-shadow: none !important; outline: 0 !important; }
@media (min-width: 992px) {
    .bbp-plans { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; overflow: visible !important; }
    .bbp-plans > .bbp-plan { min-width: 0 !important; width: auto !important; }
    /* the page title lives in the page, not squeezed into the top bar */
    #header .head-main > h3.title { display: none !important; }
}
.page-works.request-main { margin-top: 12px !important; border-radius: 22px !important; overflow: hidden; }
.bbp-mail-link { color: #13719f; font-family: "Inter", system-ui, sans-serif; text-decoration: none; font-weight: 600; }
@media (max-width: 575px) {
    .name-reviews { flex-wrap: wrap; row-gap: 2px; }
    .name-reviews .bbp-rep { flex-basis: 100%; margin-right: 0; }
}
@media (max-width: 991px) {
    #main .center > .empty-space-40 { height: 8px !important; margin: 0 !important; }
}
/* review composer: the same round blue send button as the offer composer */
.popup-container.wide .tab-answer .input-group:not(.bbp-steps) .popup-send {
    width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    color: #fff !important; background: #229ed9 !important; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(34, 158, 217, .30);
}
.popup-container.wide .tab-answer .input-group:not(.bbp-steps) .popup-send svg { width: 17px !important; height: 17px !important; fill: #fff !important; margin: 0 2px 0 0 !important; }
@media (min-width: 992px) {
    .bbp-plans > .bbp-plan .bbp-plan-btn { white-space: normal !important; padding: 10px 12px !important; height: auto !important; min-height: 44px; font-size: 14px !important; text-align: center; justify-content: center; }
}
ol.bbp-req-perks { list-style: none; padding: 0; margin: 18px 0 0; }
/* phones: region / budget / deadline in one row, scrolled sideways */
@media (max-width: 575px) {
    .bbp-req-dock .bbp-composer-opts { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-left: -12px !important; padding-left: 12px !important; }
    .bbp-req-dock .bbp-composer-opts::-webkit-scrollbar { display: none; }
    .bbp-req-dock .bbp-composer-opts .bbp-chip { flex: none !important; }
}

/* request composer: the send button is the same round blue icon as the seller's reply composer */
.bbp-req-dock .bbp-composer-bar { justify-content: flex-end !important; margin-top: 0 !important; }
.bbp-req-dock .bbp-composer-send { flex: none !important; margin-right: auto !important; }
.bbp-req-dock .bbp-composer-send .bbp-btn-primary,
.bbp-req-dock .bbp-composer-send button.bbp-btn-primary {
    width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; gap: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 0 !important; line-height: 0 !important; color: #fff !important; background: #229ed9 !important;
    border-radius: 50% !important; box-shadow: 0 4px 12px rgba(34, 158, 217, .30) !important;
}
.bbp-req-dock .bbp-composer-send .bbp-btn-primary svg,
.bbp-req-dock .bbp-composer-send .bbp-btn-primary .bbp-icon { width: 19px !important; height: 19px !important; margin: 0 2px 0 0 !important; color: #fff !important; }
@media (max-width: 575px) {
    .bbp-req-dock .bbp-composer-send { flex: none !important; }
    .bbp-req-dock .bbp-composer-send .bbp-btn-primary { width: 44px !important; }
}
.bbp-req-dock .bbp-composer-bar { display: flex !important; }
.bbp-req-dock .bbp-composer-send { display: flex !important; justify-content: flex-end; width: auto !important; margin-right: auto !important; }
@media (max-width: 575px) { .bbp-req-dock .bbp-composer-send { flex: 1 1 100% !important; width: 100% !important; } }
/* budget chip: "345 грн" — the currency sits right after the number */
.bbp-req-dock .bbp-chip input[name="priceFrom"].has-value { padding-left: 2px !important; min-width: 2ch; }
.bbp-req-dock .bbp-chip .bbp-cur { padding-left: 10px; font: 500 14px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-req-dock .bbp-chip .bbp-cur { margin-right: -4px; }

/* ---------- home = assistant chat ---------- */
.bbp-assist { display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; }
.bbp-assist-chat { padding-top: 28px; }
.bbp-assist-chat .blabla-comment .text p { margin: 0; font-size: 18px; line-height: 1.5; }
.bbp-assist-seller { display: inline-block; margin: 14px 54px 0 0; font: 600 14px/1.4 "Inter", system-ui, sans-serif; color: #13719f; cursor: pointer; text-decoration: none; }
.bbp-assist-dock { margin-top: auto; }
.bbp-assist-dock .bbp-composer { display: flex; align-items: flex-end; gap: 10px; }
.bbp-assist-text { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; margin: 0; padding: 10px 0; font: 400 17px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none; resize: none; }
.bbp-assist-text::placeholder { color: #62676c; }
.bbp-assist-dock .bbp-composer-bar { flex: none; margin: 0 !important; }
.bbp-assist-dock .bbp-composer-send { width: auto !important; flex: none !important; }
.bbp-assist-sugg { margin: 0 0 10px; }
.bbp-assist-sugg-label { display: block; margin: 0 4px 6px 0; font: 500 13px/1.3 "Inter", system-ui, sans-serif; color: #62676c; }
.bbp-assist-sugg-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bbp-assist-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; font: 600 14px/1 "Inter", system-ui, sans-serif; color: #13719f; text-decoration: none; background: #e2f2fa; border-radius: 17px; }
@media (max-width: 575px) {
    .bbp-assist-chat { padding-top: 12px; }
    .bbp-assist-chat .blabla-comment .text p { font-size: 17px; }
    .bbp-assist-sugg-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -12px; padding-left: 12px; }
    .bbp-assist-sugg-list::-webkit-scrollbar { display: none; }
    .bbp-assist-chip { flex: none; }
    .bbp-assist-dock .bbp-composer-send { flex: none !important; width: auto !important; }
}
.bbp-assist-text, .bbp-assist-text:focus, .bbp-assist-text:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }
.bbp-assist-chat .blabla-comment.not-first .text::before, .bbp-assist-chat .blabla-comment.not-first .name { display: none !important; }
.bbp-assist-seller { display: inline-block; margin: 12px 0 0 !important; font-size: 15px; }
.bbp-assist-chat .blabla-comment .text p + p { margin-top: 10px; }
/* home: no header search (the assistant field is the search); logo on the button; popular categories under the field */
/* home: the header search is shown like on the other pages */
.bbp-assist-go .bbp-assist-logo { width: 18px; height: auto; filter: brightness(0) invert(1); }
.bbp-assist-popular { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.bbp-assist-popular[hidden] { display: none; }
.bbp-assist-chip.is-popular { color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); font-weight: 500; }
@media (max-width: 575px) {
    .bbp-assist-popular { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -12px; padding-left: 12px; }
    .bbp-assist-popular::-webkit-scrollbar { display: none; }
    .bbp-assist-popular .bbp-assist-chip { flex: none; }
}
/* bottom field pinned to the screen (see pinDocks in bbp-cards.js) */
.bbp-req-dock.is-fixed { position: fixed !important; bottom: 0 !important; top: auto !important; z-index: 40; margin: 0 !important; box-sizing: border-box; }
.bbp-assist .bbp-example-toggle { margin: 16px 54px 0 0; }
.bbp-assist-examples { margin: 14px 0 0; }
.bbp-assist-examples .bbp-slider { margin-top: 0; }
@media (max-width: 575px) { .bbp-assist .bbp-example-toggle { margin-right: 50px; } }

/* request page = continuation of the home assistant chat */
.bbp-chat { margin-top: 6px; }
.bbp-chat .blabla-comment .text p { margin: 0; font-size: 17px; line-height: 1.5; }
.bbp-chat .blabla-comment .text p + p { margin-top: 8px; }
.bbp-chat-user { display: flex; justify-content: flex-end; margin: 14px 0; }
.bbp-chat-user[hidden] { display: none; }
.bbp-chat-bubble { max-width: 80%; padding: 10px 16px; font: 500 16px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #edece9; border-radius: 18px 18px 18px 4px; white-space: pre-line; overflow-wrap: anywhere; }
.bbp-chat-answer { margin-top: 14px; }
.bbp-chat-title { margin: 0 0 12px !important; font: 600 21px/1.3 var(--bbp-serif) !important; color: var(--bbp-ink); }
.bbp-chat .bbp-req-perks { margin: 0 !important; }
.bbp-req-intro > .bbp-example-toggle { margin-right: 54px; }
@media (max-width: 575px) { .bbp-req-intro > .bbp-example-toggle { margin-right: 50px; } .bbp-chat-title { font-size: 19px !important; } }
.bbp-req:has(.bbp-assist-dock) .bbp-subcats { margin-top: 14px; margin-right: 54px; }
@media (max-width: 575px) { .bbp-req:has(.bbp-assist-dock) .bbp-subcats { margin-right: 0; } }

/* chat pages (home, subcategories, request): one text column 37px from the avatar edge, even rhythm */
.bbp-req-intro > .bbp-example-toggle, .bbp-assist .bbp-example-toggle { margin: 18px 37px 0 0 !important; }
.bbp-req:has(.bbp-assist-dock) .bbp-subcats { margin-right: 37px !important; }
.bbp-chat .blabla-comment + .blabla-comment, .bbp-chat .bbp-chat-user + .blabla-comment { margin-top: 18px !important; }
.bbp-chat .blabla-comment .text p, .bbp-assist-chat .blabla-comment .text p { font-size: 16.5px !important; line-height: 1.55 !important; }
.bbp-chat-title { margin: 2px 0 12px !important; font-size: 21px !important; line-height: 1.3 !important; }
.bbp-chat .bbp-req-perks { gap: 10px !important; }
.bbp-chat .bbp-req-perks li { font: 500 15px/1.4 "Inter", system-ui, sans-serif !important; align-items: center; }
.bbp-chat .bbp-req-perks .bbp-perk-ic { width: 30px; height: 30px; margin-top: 0; }
.bbp-req2 .bbp-crumbs { margin-bottom: 18px; }
@media (max-width: 575px) {
    .bbp-req-intro > .bbp-example-toggle, .bbp-assist .bbp-example-toggle { margin-right: 37px !important; }
    .bbp-req:has(.bbp-assist-dock) .bbp-subcats { margin-right: 0 !important; }
    .bbp-chat-title { font-size: 19px !important; }
}
.bbp-req .bbp-req-head { margin-bottom: 0 !important; }
.bbp-req .bbp-chat { margin-top: 0 !important; }

/* ---------- home composer: category chip + picker sheet ---------- */
.bbp-home-composer .bbp-composer { display: block !important; }
.bbp-home-composer .bbp-assist-text { width: 100%; min-height: 52px; padding: 6px 0 4px; }
.bbp-home-composer .bbp-composer-bar { display: flex !important; justify-content: flex-end; }
.bbp-cat-chip { border: 1px dashed #b6d7e7 !important; background: #edf7fc !important; color: #13719f !important; font: 600 14px/1 "Inter", system-ui, sans-serif; cursor: pointer; padding: 0 10px 0 12px !important; }
.bbp-cat-chip .bbp-icon { color: #13719f !important; }
.bbp-cat-chip.is-set { border-style: solid !important; border-color: #a5d6ee !important; background: #e2f2fa !important; }
.bbp-cat-chip-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-home-note { margin: 4px 0 0; font: 500 13.5px/1.45 "Inter", system-ui, sans-serif; color: #b4541a; }
.bbp-home-composer .bbp-assist-chip { border: 0; cursor: pointer; }
.bbp-home-composer .bbp-assist-chip.is-popular { border: 1px solid var(--bbp-line); }
.bbp-catpick { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center; }
.bbp-catpick[hidden] { display: none; }
.bbp-catpick-layer { position: absolute; inset: 0; background: rgba(31, 35, 38, .45); }
.bbp-catpick-sheet { position: relative; width: min(560px, 100%); max-height: min(78vh, 680px); display: flex; flex-direction: column; margin: 0 0 max(24px, env(safe-area-inset-bottom)); background: #fff; border-radius: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); overflow: hidden; }
.bbp-catpick-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 12px 12px; border-bottom: 1px solid var(--bbp-line); }
.bbp-catpick-title { flex: 1; min-width: 0; font: 600 17px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-catpick-back, .bbp-catpick-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--bbp-ink); background: #f3f1ea; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-catpick-list { overflow-y: auto; padding: 6px 8px 12px; }
.bbp-catpick-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 10px 12px; font: 500 15.5px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-ink); text-align: right; background: transparent; border: 0; border-radius: 12px; cursor: pointer; }
.bbp-catpick-item:hover { background: #f0f2f5; }
.bbp-catpick-item.has-kids::after { content: ""; width: 8px; height: 8px; margin-right: 12px; flex: none; border-left: 2px solid #9a9ea3; border-top: 2px solid #9a9ea3; transform: rotate(-45deg); }
html.bbp-catpick-open, html.bbp-catpick-open body { overflow: hidden !important; }
@media (max-width: 575px) {
    .bbp-catpick-sheet { width: 100%; max-height: 86vh; margin: 0; border-radius: 22px 22px 0 0; }
    .bbp-cat-chip-name { max-width: 150px; }
}
/* chips above the text: always one row, scrolled sideways (home and request form) */
.bbp-req-dock .bbp-composer-opts { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden; scrollbar-width: none; margin-left: -12px !important; padding-left: 12px !important; }
.bbp-req-dock .bbp-composer-opts::-webkit-scrollbar { display: none; }
.bbp-req-dock .bbp-composer-opts > .bbp-chip { flex: none !important; }
.bbp-req-dock .bbp-cat-chip { height: 34px; }
.bbp-assist-chat .bbp-req-perks { margin: 0 0 4px !important; }
.bbp-assist-chat .bbp-assist-seller { margin-top: 14px !important; }
.bbp-home-hints { margin: 10px 0 0 !important; }
.bbp-home-hints[hidden] { display: none !important; }
.bbp-home-hints-list { display: contents; }
/* seller header: how many categories/regions are chosen in the filter */
a.filter-button { position: relative; }
.bbp-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-right: 6px; padding: 0 6px; box-sizing: border-box; font: 700 11.5px/1 "Inter", system-ui, sans-serif; color: #fff; background: #229ed9; border-radius: 10px; }
@media (max-width: 991px) {
    #header .head-main > a.filter-button .bbp-filter-count { position: absolute; top: 1px; left: -2px; min-width: 18px; height: 18px; margin: 0; padding: 0 5px; font-size: 10.5px; box-shadow: 0 0 0 2px #f3f1ea; }
}
/* "+ Новий запит": the blue primary action */
#main a.menu-button.bbp-new-request, #main .bbp-new-request { color: #fff !important; background: #229ed9 !important; border-color: #229ed9 !important; box-shadow: 0 4px 12px rgba(34, 158, 217, .25) !important; }
#main a.menu-button.bbp-new-request:hover { background: #229ed9 !important; }
/* cards: a bot message always starts at the left edge, short or long */
#main .request.open-popup .request-body > .blabla-comment { align-self: stretch !important; width: auto !important; margin-right: 0 !important; margin-left: 0 !important; justify-content: flex-start !important; }
#main .request.open-popup .request-body > .blabla-comment .bbp-card-cta { margin-right: 8px; }
/* chat menu: "Продовжити на 7 днів" looks like the other menu items */
.bbp-menu-form { margin: 0; }
.bbp-menu-extend { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; font: inherit; font-weight: 500; color: inherit; text-align: right; background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.bbp-menu-extend:hover { background: #f0f2f5; }
.bbp-menu-extend .bbp-icon { flex: none; opacity: .7; }
.bbp-menu-extend { font-weight: 400 !important; padding: 9px 12px !important; gap: 10px !important; }
/* contact cards: phone / e-mail / copy as plain links, no pill background */
.bbp-contact-btn, .bbp-contact-copy { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.bbp-contact-links { gap: 4px 14px !important; }
.bbp-contact-btn { padding-right: 0 !important; padding-left: 0 !important; }
.bbp-contact-btn:hover span { text-decoration: underline; text-underline-offset: 3px; }
.popup-container.wide .tab-answer .list-files-uploaded .wrap .bbp-saved-photos { display: contents !important; }
/* ---------- "Мій AI-агент" (cabinet/agent) and the API docs page (site/api) ---------- */
.bbp-agent, .bbp-api { max-width: 760px; }
.bbp-agent-lead p { margin: 0 0 10px; font: 400 18px/1.55 var(--bbp-serif); color: var(--bbp-ink); }
.bbp-agent-lead p.bbp-agent-muted, .bbp-agent-muted { font: 400 14px/1.55 "Inter", system-ui, sans-serif; color: var(--bbp-muted); margin: 0 0 8px; }
.bbp-agent-card { margin: 16px 0; padding: 20px 22px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 16px; }
.bbp-agent-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.bbp-agent-head h3 { flex: 1; min-width: 0; margin: 0; font: 600 17px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-agent-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--bbp-ink); background: var(--bbp-tile); border-radius: 11px; }
.bbp-agent-pill { flex: none; padding: 5px 10px; font: 600 12px/1 "Inter", system-ui, sans-serif; color: var(--bbp-muted); background: var(--bbp-tile); border-radius: 999px; }
.bbp-agent-pill.is-on { color: #13719f; background: #e3f3fb; }
.bbp-agent-text { margin: 0 0 10px; font: 400 14.5px/1.6 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-agent-text a, .bbp-agent-note a { color: #13719f; text-decoration: underline; text-underline-offset: 3px; }
.bbp-agent-meta { margin: 0 0 4px; font: 400 13.5px/1.6 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-agent code, .bbp-api code { font: 500 13px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--bbp-ink); background: var(--bbp-tile); padding: 1px 6px; border-radius: 6px; }
.bbp-agent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.bbp-agent-inline { display: inline-block; margin: 0; }
.bbp-agent-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid #d9d5ce; border-radius: 10px; cursor: pointer; }
.bbp-agent-btn:hover { background: var(--bbp-hover); }
.bbp-agent-btn.is-primary { color: #fff; background: var(--bbp-ink); border-color: var(--bbp-ink); }
.bbp-agent-btn.is-primary:hover { background: #000; }
.bbp-agent-btn.is-danger { color: #c0392b; background: transparent; border-color: transparent; padding: 0 8px; }
.bbp-agent-btn.is-danger:hover { text-decoration: underline; text-underline-offset: 3px; background: transparent; }
.bbp-agent-code { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 10px 14px 10px 10px; background: var(--bbp-tile); border: 1px solid var(--bbp-line); border-radius: 12px; }
.bbp-agent-code code, .bbp-agent-code pre { flex: 1; min-width: 0; margin: 0; padding: 2px 0 !important; background: transparent !important; word-break: break-all; white-space: pre-wrap; }
.bbp-agent-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; font: 600 13px/1 "Inter", system-ui, sans-serif; color: #13719f; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.bbp-agent-copy:hover span { text-decoration: underline; text-underline-offset: 3px; }
.bbp-agent-secret.is-new { margin: 0 0 14px; padding: 14px 16px 4px; background: #e3f3fb; border: 1px solid #b4def2; border-radius: 12px; }
.bbp-agent-secret.is-new p { margin: 0 0 10px; font: 400 14.5px/1.55 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-agent-secret.is-new .bbp-agent-code { background: #fff; }
.bbp-agent-note { margin: 12px 0; padding: 11px 14px; font: 500 14px/1.5 "Inter", system-ui, sans-serif; color: #8a4a12; background: #fbf3e8; border: 1px solid #f0dcc0; border-radius: 12px; }
.bbp-agent-step { padding: 14px 0 4px; border-top: 1px dashed var(--bbp-line); }
.bbp-agent-step:first-of-type { border-top: 0; padding-top: 0; }
.bbp-agent-step h4 { margin: 0 0 8px; font: 600 15px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-agent-hook { display: flex; gap: 8px; margin: 4px 0 14px; }
.bbp-agent-input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; font: 400 14.5px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid #d9d5ce; border-radius: 10px; }
.bbp-agent-input:focus { outline: none; border-color: #229ed9; box-shadow: 0 0 0 3px rgba(34, 158, 217, .15); }
.bbp-agent-log { margin: 6px 0 0; padding: 0; list-style: none; }
.bbp-agent-log li { display: flex; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--bbp-line); font: 400 14px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-agent-log-when { flex: none; width: 130px; color: var(--bbp-muted); font-size: 13px; }
.bbp-agent-log-what b { font-weight: 600; }
.bbp-agent-log-what span { display: block; color: var(--bbp-muted); font-size: 13px; overflow-wrap: anywhere; }
.bbp-agent-log li.is-error b { color: #c0392b; }
.bbp-api-table { width: 100%; border-collapse: collapse; margin: 4px 0 10px; font: 400 14px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-api-table td { padding: 9px 0 9px 10px; vertical-align: top; border-top: 1px dashed var(--bbp-line); }
.bbp-api-table td:first-child { width: 42%; }
.bbp-api-table code { white-space: nowrap; }
@media (max-width: 575px) {
    .bbp-agent-card { padding: 16px; border-radius: 14px; }
    .bbp-agent-lead p { font-size: 17px; }
    .bbp-agent-hook { flex-wrap: wrap; }
    .bbp-agent-hook .bbp-agent-btn { width: 100%; }
    .bbp-agent-log li { flex-direction: column; gap: 2px; }
    .bbp-agent-log-when { width: auto; }
    .bbp-api-table tr { display: block; padding: 8px 0; border-top: 1px dashed var(--bbp-line); }
    .bbp-api-table td { display: block; width: auto !important; padding: 2px 0; border: 0; }
    .bbp-api-table code { white-space: normal; word-break: break-all; }
}
.bbp-agent > h2.heading { display: block !important; margin: 18px 4px 14px !important; padding: 0 !important; font: 500 30px/1.2 var(--bbp-serif) !important; color: var(--bbp-ink) !important; text-align: right !important; text-transform: none !important; letter-spacing: 0 !important; }
.bbp-agent-lead { margin: 0 4px; }
.bbp-agent-quote { font-style: normal; font-weight: 400; }
/* code: break long commands at spaces first; multi-line samples scroll sideways instead of splitting words */
.bbp-agent-code code { word-break: normal !important; overflow-wrap: anywhere; }
.bbp-agent-code pre { white-space: pre !important; word-break: normal !important; overflow-x: auto; scrollbar-width: thin; }
.bbp-agent-code pre code { white-space: pre !important; overflow-wrap: normal; }
/* owner page: AI categories */
.bbp-aicat-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bbp-aicat-form { display: inline-flex; gap: 6px; align-items: center; }
.bbp-aicat-actions .bbp-agent-input { height: 34px; width: 210px; flex: none; font-size: 13.5px; }
.bbp-aicat-actions .bbp-agent-btn { height: 34px; padding: 0 12px; font-size: 13px; }
@media (max-width: 575px) { .bbp-aicat-form { width: 100%; } .bbp-aicat-actions .bbp-agent-input { width: auto; flex: 1; } }
/* "Доповнити запит" (cabinet/order-edit) */
.bbp-edit-label { display: block; margin: 0 0 6px; font: 600 14px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-edit-text { display: block; width: 100%; height: auto !important; min-height: 130px; padding: 10px 12px !important; line-height: 1.5 !important; resize: vertical; box-sizing: border-box; }
.bbp-edit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.bbp-edit-chips .bbp-agent-btn { height: 32px; padding: 0 12px; font-size: 13px; color: #13719f; border-color: #b4def2; background: #edf7fc; }
.bbp-edit-row { display: flex; gap: 12px; margin: 16px 0 0; }
.bbp-edit-field { flex: 1; min-width: 0; }
.bbp-edit-field .bbp-agent-input { width: 100%; box-sizing: border-box; }
#main .blabla-comment .bbp-card-edit { text-decoration: none; }
@media (max-width: 575px) { .bbp-edit-row { flex-direction: column; } }
/* request check: clarity scale and advice for the author, held requests */
.bbp-clarity { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 8px; font: 600 13px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-clarity-dots { display: inline-flex; gap: 4px; }
.bbp-clarity-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #dcd8d0; }
.bbp-clarity-dots i.on { background: #229ed9; }
.bbp-clarity-lead { margin: 0 0 6px; }
.bbp-advice { margin: 0 0 10px; padding-right: 20px; }
.bbp-advice li { margin: 0 0 4px; list-style: disc; }
#main .blabla-comment.bbp-held .text b, .bbp-agent-note b { color: #c0392b; }
.bbp-clarity-card { font: 400 15px/1.55 var(--bbp-serif); color: var(--bbp-ink); }
/* home composer: the category suggestion the buyer tapped (no category field any more) */
.bbp-home-composer .bbp-assist-chip.is-selected { color: #fff; background: var(--bbp-accent); }
/* request popup, no offers yet: clarity scale and advice under "Ми надіслали…"; a held request */
.bbp-offers-clarity { width: 100%; max-width: 520px; margin: 14px 0 2px; padding: 12px 14px; text-align: right; font-size: 14px; line-height: 1.55; color: var(--bbp-ink); background: #f5f3ef; border-radius: 12px; }
.bbp-offers-clarity .bbp-clarity-lead:last-child, .bbp-offers-clarity .bbp-advice:last-child { margin-bottom: 0; }
.bbp-offers-clarity .bbp-card-edit, .bbp-offers-held .bbp-card-edit { margin: 2px 0 0; text-decoration: none; }
.bbp-offers-held { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bbp-offers-held .bbp-offers-empty-title { color: #c0392b; }
.bbp-offers-held .bbp-card-edit { margin-top: 12px; }
/* clarity = a "signal" for sellers: five rising bars on a soft pill, coral (1/5) → amber → green (5/5); the bars grow in once */
.bbp-clarity { --lvl: #d9534f; --lvl-soft: #fbe9e7; --bar-off: #ddd8cf; gap: 6px 10px; font-weight: 500; }
.bbp-clarity.lvl-2 { --lvl: #e0782f; --lvl-soft: #fcefe3; }
.bbp-clarity.lvl-3 { --lvl: #c9920e; --lvl-soft: #faf1d9; }
.bbp-clarity.lvl-4 { --lvl: #4f9a45; --lvl-soft: #e8f3e4; }
.bbp-clarity.lvl-5 { --lvl: #23914a; --lvl-soft: #e0f2e6; }
.bbp-clarity-meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; padding: 4px 8px; box-sizing: border-box; background: var(--lvl-soft); border-radius: 13px; }
.bbp-clarity-meter i { display: block; width: 4px; border-radius: 2px; background: var(--bar-off); transform-origin: 50% 100%; animation: bbp-bar-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.bbp-clarity-meter i:nth-child(1) { height: 6px; }
.bbp-clarity-meter i:nth-child(2) { height: 9px; animation-delay: .07s; }
.bbp-clarity-meter i:nth-child(3) { height: 12px; animation-delay: .14s; }
.bbp-clarity-meter i:nth-child(4) { height: 15px; animation-delay: .21s; }
.bbp-clarity-meter i:nth-child(5) { height: 18px; animation-delay: .28s; }
.bbp-clarity-meter i.on { background: var(--lvl); }
.bbp-clarity-text b { font-weight: 700; color: var(--lvl); }
@keyframes bbp-bar-in { from { transform: scaleY(.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bbp-clarity-meter i { animation: none; } }
.bbp-clarity-meter { flex: none; }
.bbp-offers-clarity .bbp-clarity { flex-wrap: nowrap; margin-bottom: 0; }
.bbp-offers-clarity .bbp-clarity + .bbp-card-edit { margin-top: 12px; }
/* ---------- request popup v2 (owner's mockup 2026-10-01) ---------- */
/* the buyer's bubble: the clarity meter on its left, "змінити" under it (opposite the time) */
.request-body .text-right .message > .bbp-msg-aside { flex: none; align-self: center; margin-left: 10px; }
.bbp-clarity-mini { display: inline-flex; margin: 0; cursor: default; }
.request-body .text-right .message .inner { position: relative; }
.request-body .message .inner .bbp-msg-action { position: absolute; top: 100%; right: 4px; margin-top: 6px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.bbp-req-edit-link { color: var(--bbp-accent); font-weight: 600; text-decoration: none; }
.bbp-req-edit-link:hover { text-decoration: underline; }
/* BlaBlaPrice's message: plain prose next to the logo, no bubble */
.popup-container.wide .blabla-comment.bbp-check-msg { margin-top: 34px; }
.popup-container.wide .blabla-comment.bbp-check-msg .text { display: block; max-width: 600px; padding: 0; background: transparent !important; font-size: 14.5px; line-height: 1.5; }
.popup-container.wide .bbp-check-msg .text p.bbp-check-title { margin: 0 0 8px; font: 500 19px/1.4 var(--bbp-serif); color: var(--bbp-ink); }
.popup-container.wide .bbp-check-msg .text p.bbp-check-title.is-held { color: #c0392b; }
.popup-container.wide .bbp-check-msg .text p.bbp-check-lead { margin: 14px 0 6px; font-weight: 600; color: var(--bbp-ink); }
.popup-container.wide .bbp-check-msg .text p.bbp-check-text { margin: 4px 0 0; color: var(--bbp-muted); }
.bbp-crit { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bbp-crit li { --c: #d9534f; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; list-style: none; }
.bbp-crit li.is-ok { --c: #23914a; }
.bbp-crit li.is-partly { --c: #c9920e; }
.bbp-crit-mark { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bbp-crit-label { font-weight: 600; color: var(--bbp-ink); }
.bbp-crit-status { font-weight: 600; color: var(--c); }
.bbp-crit-status::before { content: "· "; color: var(--bbp-muted); font-weight: 400; }
.bbp-crit-eg { color: var(--bbp-muted); }
.bbp-crit-eg::before { content: "— "; }
.bbp-check-share { margin-top: 10px; }
.bbp-check-share .share-chat { align-items: flex-start !important; }
.bbp-check-share .share-chat > div { justify-content: flex-start !important; }
/* the edit field at the bottom of the popup */
.popup-container.wide .bbp-popup-edit { max-width: 860px; margin: 0 auto; padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); }
.bbp-popup-edit .bbp-composer { margin-top: 0; padding: 12px 18px 10px 12px; }
.bbp-popup-edit-text { display: block; width: 100%; min-height: 48px; max-height: 180px; margin: 0; padding: 4px 0; font: 400 16px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: transparent; border: 0; outline: 0; resize: none; }
.bbp-popup-edit .bbp-composer-bar { display: flex; justify-content: flex-end; margin-top: 0; }
@media (max-width: 991px) {
    .popup-container.wide .bbp-popup-edit { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
    .popup-container.wide .bbp-check-msg .text p.bbp-check-title { font-size: 17px; }
}
/* popup v2 fixes: serif only for the title, the rest in the UI font; the old share bar goes; the edit field is full width */
.popup-container.wide .bbp-check-msg .text p.bbp-check-title { font: 600 18.5px/1.4 var(--bbp-serif); }
.popup-container.wide .bbp-check-msg .text p.bbp-check-lead,
.popup-container.wide .bbp-check-msg .text p.bbp-check-text,
.popup-container.wide .bbp-check-msg .bbp-crit { font-family: "Inter", system-ui, sans-serif; font-size: 13.5px; line-height: 1.5; }
.popup-container.wide .bbp-check-msg .text p.bbp-check-lead { font-weight: 700; }
.popup-container.wide .bbp-check-msg .bbp-crit { font-weight: 500; color: var(--bbp-muted); }
.popup-container.wide .bbp-check-msg .share-button { font-family: "Inter", system-ui, sans-serif; }
.popup-container.wide:has(.bbp-check-msg) .tab-share { display: none !important; }
.popup-container.wide .bbp-popup-edit { box-sizing: border-box; width: 100%; align-self: stretch; }
.popup-container.wide .bbp-popup-edit { background: transparent; }
.request-body .text-right .message .inner a.bbp-req-edit-link { color: var(--bbp-accent); }
/* ---------- seller filter v2: a group opens into its subcategories; search on top (owner 2026-10-01) ---------- */
.seller-filter .bbp-filter-search { display: flex; align-items: center; gap: 10px; height: 48px; margin: 0 0 14px; padding: 0 16px; color: var(--bbp-muted); background: #fff; border: 1px solid var(--bbp-line); border-radius: 14px; }
.seller-filter .bbp-filter-search:focus-within { border-color: #cfcbc1; }
.seller-filter .bbp-filter-search-input { flex: 1; min-width: 0; height: 100%; padding: 0; font: 500 15px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: transparent; border: 0; outline: 0; }
.seller-filter .bbp-filter-search-empty { margin: 0 4px 14px; font-size: 14px; color: var(--bbp-muted); }
.seller-filter .bbp-fgroup-head { display: flex; align-items: center; gap: 8px; }
.seller-filter .bbp-fgroup-head .input-radio { flex: 1; min-width: 0; }
.seller-filter .bbp-fgroup-toggle { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font: 600 12.5px/1 "Inter", system-ui, sans-serif; color: var(--bbp-muted); background: transparent; border: 1px solid var(--bbp-line); border-radius: 14px; cursor: pointer; }
.seller-filter .bbp-fgroup-toggle svg { transition: transform .2s; }
.seller-filter .bbp-fgroup.is-open .bbp-fgroup-toggle svg { transform: rotate(-180deg); }
.seller-filter .bbp-fgroup.is-partial .bbp-fgroup-toggle,
.seller-filter .bbp-fgroup-head:has(input:checked) .bbp-fgroup-toggle { color: var(--bbp-accent); border-color: #b4def2; }
.seller-filter .bbp-fgroup-leaves { margin: 2px 11px 10px 0; padding-right: 18px; border-right: 2px solid var(--bbp-line); }
.seller-filter .bbp-fgroup-leaves[hidden], .seller-filter .item-accordeon[hidden], .seller-filter .inner-accordeon > [hidden], .seller-filter .bbp-fgroup-leaves > [hidden] { display: none !important; }
/* a group takes its own row; "частково" = a dash in the box (the theme draws "ticked" as a 10px square in .radio::after) */
.seller-filter .inner-accordeon > .bbp-fgroup { flex: 0 0 100%; width: 100%; }
.seller-filter .bbp-fgroup.is-partial .bbp-fgroup-head .radio::after { content: ""; display: block; position: absolute; right: 50%; top: 50%; width: 10px; height: 3px; margin: -1.5px -5px 0 0; background: #229ed9; border-radius: 2px; opacity: 1; transform: none; }
/* request check v2: soft colours (no red: these are hints, not errors); the minor gaps in one quiet line */
.bbp-crit li { --c: #d27a2c; }
.bbp-crit li.is-partly { --c: #b98a12; }
.bbp-crit-more { margin: 8px 0 0 !important; font: 400 13px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-clarity-card .bbp-crit { margin-top: 12px; font-size: 14px; }
/* seller filter search: the typed letters highlighted in the names */
.seller-filter mark.bbp-hl { padding: 0 1px; color: inherit; background: #ffe58a; border-radius: 3px; }
/* ---------- BlaBlaPrice's check message: calmer type, one accent (owner 2026-10-01) ---------- */
/* serif only for the title, everything else in the UI font, regular weight; colour only on the statuses */
.popup-container.wide .bbp-check-msg .text p.bbp-check-title { font: 500 18px/1.4 var(--bbp-serif); margin: 0 0 10px; }
.popup-container.wide .bbp-check-msg .text p.bbp-check-lead,
.popup-container.wide .bbp-check-msg .text p.bbp-check-text,
.popup-container.wide .bbp-check-msg .bbp-crit,
.popup-container.wide .bbp-check-msg .bbp-crit-more,
.popup-container.wide .bbp-check-msg .bbp-steps,
.popup-container.wide .bbp-check-msg .bbp-check-delta { font-family: "Inter", system-ui, sans-serif; font-size: 14px; line-height: 1.55; }
.popup-container.wide .bbp-check-msg .text p.bbp-check-lead { margin: 14px 0 8px; font-weight: 500; color: var(--bbp-ink); }
.popup-container.wide .bbp-check-msg .bbp-crit { gap: 7px; }
.popup-container.wide .bbp-check-msg .bbp-crit li { gap: 2px 6px; }
.popup-container.wide .bbp-check-msg .bbp-crit-label { font-weight: 500; color: var(--bbp-ink); }
.popup-container.wide .bbp-check-msg .bbp-crit-status { font-weight: 500; }
.popup-container.wide .bbp-check-msg .bbp-crit-status::before { content: "— "; color: var(--bbp-muted); }
.popup-container.wide .bbp-check-msg .bbp-crit-eg { font-weight: 400; }
.popup-container.wide .bbp-check-msg .bbp-crit-eg::before { content: "· "; }
.popup-container.wide .bbp-check-msg .bbp-crit-more { margin: 10px 0 0 !important; font-size: 13px; }
/* the analysis, step by step: a spinner, then a tick */
.bbp-steps { display: grid; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; color: var(--bbp-ink); }
.bbp-steps li { display: flex; align-items: center; gap: 10px; margin: 0; list-style: none; animation: bbp-row-in .3s ease both; }
.bbp-steps li::before { content: ""; flex: none; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #b4def2; border-top-color: var(--bbp-accent); border-radius: 50%; animation: bbp-spin .8s linear infinite; }
.bbp-steps li.is-done { color: var(--bbp-muted); }
.bbp-steps li.is-done::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 "Inter", sans-serif; color: #fff; background: #23914a; border: 0; animation: none; }
@keyframes bbp-spin { to { transform: rotate(-360deg); } }
/* the new rating appears row by row */
@keyframes bbp-row-in { from { opacity: 0; transform: translateY(6px); } }
.bbp-check-msg.is-fresh .bbp-crit li { animation: bbp-row-in .4s ease both; animation-delay: calc(var(--i, 0) * 170ms + 120ms); }
.bbp-check-msg.is-fresh .bbp-check-delta { animation: bbp-row-in .4s ease both; }
.popup-container.wide .bbp-check-msg .text p.bbp-check-delta { margin: 0 0 10px; font-weight: 600; }
.bbp-check-delta.is-up { color: #23914a; }
.bbp-check-delta.is-down { color: #d27a2c; }
.bbp-check-delta.is-same { color: var(--bbp-muted); }
.bbp-popup-edit.is-busy .bbp-popup-edit-text { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .bbp-steps li, .bbp-check-msg.is-fresh .bbp-crit li, .bbp-check-msg.is-fresh .bbp-check-delta { animation: none; } .bbp-steps li::before { animation: none; } }
/* the popup's edit field: the card is the frame; no inner focus border from the old theme (seen in Opera) */
.bbp-popup-edit .bbp-popup-edit-text,
.bbp-popup-edit .bbp-popup-edit-text:focus,
.bbp-popup-edit .bbp-popup-edit-text:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }
/* ---------- "Мої запити" after the owner's mockup (2026-10-01) ---------- */
/* "+ Новий запит" in the header, right before the theme toggle and share */
#header .head-main .bbp-head-new { margin: 0 auto 0 12px; height: 40px; padding: 0 18px; display: inline-flex; align-items: center; white-space: nowrap; font: 600 14px/1 "Inter", system-ui, sans-serif; color: #fff; background: var(--bbp-accent); border-radius: 20px; box-shadow: 0 6px 18px rgba(34, 158, 217, .25); animation: none; }
/* the search stays above the cards for buyers */
.bbp-list-filter:not(.bbp-list-filter-head) { margin-top: 18px; }
/* card: the clarity meter left of the request, BlaBlaPrice's verdict in one line */
.request.open-popup .text-right .message > .bbp-msg-aside { flex: none; align-self: center; margin-left: 10px; }
.request.open-popup .text-right .message { display: flex; justify-content: flex-end; align-items: center; }
.request.open-popup .blabla-comment .text p.bbp-card-verdict { margin: 0; font: 500 14.5px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
@media (max-width: 991px) {
    #header .head-main .bbp-head-new { height: 36px; padding: 0 14px; margin-left: 8px; font-size: 13px; }
}
#header .head-main .bbp-head-new { margin-right: auto !important; margin-left: 12px !important; }
.bbp-list-filter:not(.bbp-list-filter-head) { margin-top: 0; }
#header .head-main .bbp-head-new + .bbp-theme-toggle, #header .head-main .bbp-head-new ~ .bbp-theme-toggle { margin-right: 0 !important; }
/* ---------- the buyer helps back: what BlaBlaPrice did + invite sellers and friends (owner 2026-10-01) ---------- */
.bbp-help { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--bbp-line); }
.bbp-done { display: grid; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; font: 400 14px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-done li { display: flex; align-items: baseline; gap: 8px; margin: 0; list-style: none; }
.bbp-done li::before { content: "✓"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font: 700 10px/1 "Inter", sans-serif; color: #fff; background: #23914a; border-radius: 50%; transform: translateY(2px); }
.bbp-invite { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bbp-invite-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 14px; font: 500 13.5px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); text-decoration: none; background: #f5f3ef; border: 0; border-radius: 18px; cursor: pointer; }
.bbp-invite-btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; }
.bbp-invite-btn.is-viber::before { background: #7360f2; }
.bbp-invite-btn.is-telegram::before { background: #2aabee; }
.bbp-invite-btn.is-whatsapp::before { background: #25d366; }
.bbp-invite-btn.is-facebook::before { background: #1877f2; }
.bbp-invite-btn.bbp-invite-native { color: #fff; background: var(--bbp-accent); }
.bbp-invite-btn.bbp-invite-native::before { background: #fff; }
.bbp-invite-btn.bbp-invite-copy.is-done { color: #23914a; }
.bbp-invite-btn.bbp-invite-copy.is-done::before { background: #23914a; }
/* the system share sheet only where it exists in practice: phones and tablets */
@media (hover: hover) and (min-width: 992px) { .bbp-invite-btn.bbp-invite-native { display: none; } }
.bbp-check-msg.is-fresh .bbp-help { animation: bbp-row-in .45s ease both; animation-delay: .6s; }
/* the popup's edit field: budget and region chips above the text, as on the home page */
.bbp-popup-edit .bbp-composer-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
/* BlaBlaPrice is still looking for sellers: a live step with a spinner */
/* ticks and the spinner sit the same way: a 16px icon centred on the first text line (no transform: the spinner rotates
   cleanly around its own centre instead of jumping) */
.bbp-done li { align-items: flex-start; }
.bbp-done li::before { align-self: flex-start; margin-top: 2.5px; transform: none; }
.bbp-done li.is-live::before { content: ""; width: 16px; height: 16px; box-sizing: border-box; background: transparent; border: 2px solid #b4def2; border-top-color: var(--bbp-accent); border-radius: 50%; animation: bbp-spin .9s linear infinite; transform: none; }
.bbp-done li.is-live { color: var(--bbp-ink); font-weight: 500; }
.bbp-done li.is-live .bbp-live-text { animation: bbp-breathe 2.6s ease-in-out infinite; }
@keyframes bbp-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.popup-container.wide .bbp-check-msg .text p.bbp-why { margin: 6px 0 0; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .bbp-done li.is-live::before, .bbp-done li.is-live .bbp-live-text { animation: none; } }
/* the popup's edit field: a text button "Оновити" instead of the round arrow (owner 2026-10-01) */
.bbp-popup-edit .bbp-composer-send .bbp-update-btn { width: auto; min-width: 0; height: 40px; padding: 0 20px; font: 600 14px/1 "Inter", system-ui, sans-serif; color: #fff; border-radius: 20px; }
.bbp-popup-edit .bbp-composer-send .bbp-update-btn:disabled { opacity: .75; cursor: progress; }
/* "Оновити" outranks the round icon-only send button of the request docks (font-size 0, 44px circle) */
.bbp-req-dock.bbp-popup-edit .bbp-composer-send button.bbp-btn-primary.bbp-update-btn {
    width: auto !important; min-width: 0 !important; height: 40px !important; padding: 0 22px !important;
    font: 600 14px/1 "Inter", system-ui, sans-serif !important; letter-spacing: 0; border-radius: 20px !important;
}
@media (max-width: 575px) { .bbp-req-dock.bbp-popup-edit .bbp-composer-send button.bbp-btn-primary.bbp-update-btn { width: auto !important; } }

/* request popup: a seller's contacts open right under the offer, then "Домовились" closes the request (owner 2026-10-01) */
.bbp-offer-foot .bbp-open-contacts { margin: 0 !important; height: 38px; padding: 0 16px; border-radius: 12px; }
.bbp-offer-foot .bbp-open-contacts[disabled] { opacity: .6; cursor: progress; }
.bbp-offer-contacts { margin: 12px 50px 0 0; padding: 12px 14px; background: #f5f8fd; border: 1px solid #d9ecf6; border-radius: 14px; }
.bbp-offer-contacts .bbp-contact-links { margin: 0 !important; }
.bbp-offer-deal-note { margin: 8px 0 10px; font-size: 13px; line-height: 1.45; color: #5c6166; }
.bbp-offer-contacts .bbp-agree { height: 38px; padding: 0 18px; border-radius: 12px; font-size: 14px; }
.bbp-offer-contacts .bbp-agree[disabled] { opacity: .6; cursor: progress; }
.bbp-offer-deal { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; font-weight: 600; }
.bbp-offer-deal.is-agreed { color: #2f7a2a; }
.bbp-offer-deal.is-refused { color: #62676c; font-weight: 500; }
.bbp-offer-contacts.is-refused { background: transparent; border-color: var(--bbp-line); }
.bbp-offer-contacts.is-refused .bbp-contact-links { opacity: .6; }
.bbp-offers-done { margin: 0 0 12px; padding: 10px 14px; font-size: 14px; line-height: 1.45; font-weight: 500; color: #2f7a2a; background: #eef8ea; border: 1px solid #bfe0a8; border-radius: 12px; }
@media (max-width: 640px) {
    .bbp-offer-contacts { margin-right: 0; }
    .bbp-offer-contacts .bbp-agree { width: 100%; }
}
/* "+ Новий запит" always sits right before the theme toggle and share, whatever else lands in the header row (owner 2026-10-02) */
#header .head-main:has(> .bbp-head-new) > * { order: 0; }
#header .head-main:has(> .bbp-head-new) > .bbp-head-new { order: 8; }
#header .head-main:has(> .bbp-head-new) > .bbp-theme-toggle { order: 9; }
#header .head-main:has(> .bbp-head-new) > .head-social { order: 10; }
/* ---------- one account, two modes: "Купую | Продаю" above the left menu (owner 2026-10-02) ---------- */
.bbp-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-self: stretch; box-sizing: border-box; width: calc(100% - 20px); margin: 10px 10px 0; padding: 4px; background: #ebe8e1; border-radius: 14px; }
.bbp-mode-btn { position: relative; height: 36px; padding: 0 10px; font: 600 13.5px/1 "Inter", system-ui, sans-serif; color: #5c6166; background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.bbp-mode-btn.is-active { color: var(--bbp-ink); background: #fff; box-shadow: 0 1px 3px rgba(31, 35, 38, .12); cursor: default; }
.bbp-mode-dot { position: absolute; top: 9px; left: 10px; width: 7px; height: 7px; background: var(--bbp-accent); border-radius: 50%; }
/* ---------- Google-only sign-in card (owner 2026-10-02) ---------- */
.bbp-auth-pop { max-width: 420px; }
.bbp-auth { display: grid; gap: 14px; text-align: center; }
.bbp-auth .popup-title { margin: 4px 0 0; font: 600 22px/1.25 var(--bbp-serif); color: var(--bbp-ink); }
.bbp-auth-text { margin: 0; font-size: 14px; line-height: 1.5; color: #5c6166; }
.bbp-auth-mode { width: auto; margin: 0; }
.bbp-google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 20px; font: 600 15px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 24px; text-decoration: none; }
.bbp-google-btn:hover { background: #f0f2f5; }
.bbp-auth-note { margin: 0; font-size: 12px; line-height: 1.5; color: #62676c; }
.bbp-auth-note a { color: inherit; text-decoration: underline; }
/* ---------- settings: account + contacts per mode (owner 2026-10-02) ---------- */
.bbp-settings .bbp-title { margin: 24px 0 18px; }
.bbp-settings-form { display: grid; gap: 16px; max-width: 640px; margin: 0 auto 40px; }
.bbp-set-card { padding: 18px 20px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 16px; }
.bbp-set-card h2 { margin: 0 0 6px; font: 600 18px/1.3 var(--bbp-serif); color: var(--bbp-ink); }
.bbp-set-google { margin: 0 0 12px; font-size: 14px; color: #5c6166; }
.bbp-set-google b { color: var(--bbp-ink); font-weight: 600; }
.bbp-set-hint { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #5c6166; }
.bbp-set-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; margin: 0 0 10px; }
.bbp-set-row > span { font-size: 14px; font-weight: 600; color: var(--bbp-ink); }
.bbp-set-row input, .bbp-set-row select { height: 42px; padding: 0 12px; font: 14px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 12px; }
.bbp-set-contact { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.bbp-set-contact .bbp-set-row { margin-bottom: 10px; }
.bbp-set-share { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; color: #5c6166; white-space: nowrap; cursor: pointer; }
.bbp-set-share input { width: 18px; height: 18px; accent-color: var(--bbp-accent); }
.bbp-set-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.bbp-set-actions .bbp-btn-primary { height: 42px; padding: 0 22px; border-radius: 12px; }
.bbp-set-status { font-size: 13.5px; color: #5c6166; }
.bbp-set-status.is-ok { color: #2f7a2a; }
.bbp-set-status.is-error { color: #b4442f; }
.bbp-contact-none { font-size: 13.5px; color: #62676c; }
@media (max-width: 640px) {
    .bbp-set-row { grid-template-columns: 1fr; gap: 6px; }
    .bbp-set-card { padding: 16px 14px; }
}
/* the seller sees which contacts the buyer shares (owner 2026-10-02) */
.bbp-buyer-channels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 52px 4px 0; font-size: 13px; color: #5c6166; }
.bbp-bc-lead { flex: 0 0 100%; }
.bbp-bc-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; font-weight: 600; color: var(--bbp-ink); background: #f3f1ec; border-radius: 13px; }
.bbp-bc-chip .bbp-icon { color: #13719f; }
@media (max-width: 640px) { .bbp-buyer-channels { margin-right: 0; } }
/* ---------- offers: the price is optional, Jev's check (owner 2026-10-02) ---------- */
/* the price step always has "Готово" back to the text, with or without a price */
.popup-container.wide .tab-answer .input-group.bbp-steps:not(.bbp-step-comment) .bbp-add-comment {
    display: inline-flex; align-items: center; grid-area: send; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600;
    color: #fff; background: var(--bbp-ink); border: 0; border-radius: 12px; cursor: pointer;
}
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-price-chip.is-empty { color: #13719f; background: #fff; border-style: dashed; }
.popup-container.wide .tab-answer .input-group.bbp-steps .bbp-price-chip.is-empty .bbp-chip-edit { text-decoration: none; color: #62676c; }
.bbp-offer-price b.bbp-no-price { font: 600 14px/1.3 "Inter", system-ui, sans-serif; color: #5c6166; white-space: nowrap; }
.blabla-comment.bbp-held .text p { color: #9a4a1f; }
/* the seller's popup after a send: held reasons and the hint (owner 2026-10-02) */
.bbp-offer-check.is-held .text p.bbp-check-title { color: #b4442f; }
.bbp-offer-reasons { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; font: 400 14px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-offer-reasons li { position: relative; padding-right: 22px; }
.bbp-offer-reasons li::before { content: "!"; position: absolute; right: 0; top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font: 700 10px/1 "Inter", sans-serif; color: #fff; background: #9a5212; border-radius: 50%; }
.bbp-check-msg .text p.bbp-check-hint { margin: 8px 0 0; font: 400 13.5px/1.5 "Inter", system-ui, sans-serif; color: #5c6166; }
.input-group.bbp-steps.is-busy .popup-send { opacity: .5; pointer-events: none; }
.popup-container.wide .bbp-check-msg .text p.bbp-check-hint { margin: 8px 0 0; font: 400 13.5px/1.5 "Inter", system-ui, sans-serif; color: #5c6166; }
.popup-container.wide .bbp-offer-reasons li { font-size: 14px; }
/* offer strength inside BlaBlaPrice's word (owner 2026-10-02) */
.bbp-offer-quality { margin: 10px 0 4px; }
.bbp-offer-quality .bbp-clarity { margin: 0 0 8px; }
.bbp-offer-quality .bbp-crit { margin: 0 0 6px; }
/* at most 3 photos per offer (owner 2026-10-02) */
.bbp-photo-note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: #9a4a1f; }

/* =====================================================================
 * No prices (owner 2026-10-02): offers are ranked by benefit to the buyer
 * ===================================================================== */
/* buyer: the best deal is marked, every offer says what it states */
.bbp-offers-note { margin: -4px 0 12px; font-size: 13px; line-height: 1.45; color: #62676c; }
.bbp-rank-best { display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 1.4; color: #13719f; background: #e3f3fb; border-radius: 999px; white-space: nowrap; }
.bbp-offer-stated { margin: 8px 50px 0 0; font-size: 12.5px; line-height: 1.45; color: #5c6166; }
.bbp-offer-stated span { color: #9a9ea3; }
@media (max-width: 640px) {
    .bbp-offer-stated { margin-right: 0; }
}
/* seller: the place in the verdict after sending */
.bbp-done li.bbp-done-place.is-top { color: #13719f; font-weight: 600; }
/* the composer has only the text now: photos take the whole first row of the card */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment.bbp-text-only { grid-template-areas: "files files files" "text text icon" "attach hint hint"; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment.bbp-text-only .list-files-uploaded .wrap { margin-right: 14px; }
@media (max-width: 640px) {
    .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment.bbp-text-only { grid-template-areas: "files files files" "text text icon" "attach attach attach" "hint hint hint"; }
}

/* =====================================================================
 * One photo to a buyer's request (owner 2026-10-02): a camera button next to "send", then a thumbnail with ×
 * ===================================================================== */
.bbp-req-photo { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.bbp-req-photo-add { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 !important; padding: 0; color: #5f646a; background: #f3f1ea; border: 1px solid var(--bbp-line); border-radius: 50%; cursor: pointer; }
.bbp-req-photo-add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bbp-req-photo.has-photo .bbp-req-photo-add { display: none; }
.bbp-req-photo.is-loading .bbp-req-photo-add { opacity: .5; pointer-events: none; }
.bbp-req-photo-thumb { position: relative; display: inline-block; width: 42px; height: 42px; }
.bbp-req-photo-thumb[hidden] { display: none; }
.bbp-req-photo-thumb a { display: block; width: 100%; height: 100%; }
.bbp-req-photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--bbp-line); }
.bbp-req-photo-del { position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; padding: 0; font-size: 14px; line-height: 18px; text-align: center; color: #fff; background: #1f2326; border: 2px solid #fff; border-radius: 50%; cursor: pointer; }
.bbp-req-photo-note { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; max-width: 260px; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; color: #fff; background: #1f2326; border-radius: 10px; white-space: normal; width: max-content; }
.bbp-req-photo-note[hidden] { display: none; }
/* the edit page: the photo under the text */
.bbp-edit-photo { margin: 10px 0 4px; }

/* a seller without points (owner 2026-10-02): the offer is checked and rated, the buyer gets it after a top-up and a resend */
.bbp-offer-unpaid .bbp-unpaid-why { margin: 4px 0 10px; font-weight: 600; color: #7a4b0e; }
.bbp-offer-unpaid .bbp-unpaid-pay { display: inline-flex; margin-top: 12px; }
.bbp-unpaid-note .bbp-check-hint { margin-top: 6px; }

/* "Запроси друга" (owner 2026-10-02) */
.bbp-invite-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bbp-invite-stats b { font-weight: 600; }
.aside-menu .count.bbp-invite-plus { color: #2f7a3e; background: #e6f3e8; }
.bbp-pricing-invite { display: block; margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.bbp-pricing-invite .bbp-icon { vertical-align: -3px; margin-left: 4px; }
.bbp-offer-unpaid .bbp-unpaid-invite { margin-top: 10px; }
/* phones: the tab bar has room for an icon with "+2" only */
@media (max-width: 991px) {
    #header .aside-menu li.bbp-invite-li { flex: 0 0 auto; }
    #header .aside-menu li.bbp-invite-li .bbp-invite-label { display: none; }
}

/* =====================================================================
 * Category page article and related links (owner 2026-10-02, SEO): a readable column under the example
 * ===================================================================== */
.bbp-cat-article { display: grid; gap: 22px; margin: 28px 0 8px; color: var(--bbp-ink); }
.bbp-cat-article-body { max-width: 68ch; font-size: 15.5px; line-height: 1.65; }
.bbp-cat-article-body h2, .bbp-cat-faq h2 { margin: 0 0 10px; font-family: var(--bbp-serif); font-size: 22px; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.bbp-cat-article-body h3 { margin: 18px 0 6px; font-size: 17px; font-weight: 600; }
.bbp-cat-article-body p { margin: 0 0 12px; }
.bbp-cat-article-body ul, .bbp-cat-article-body ol { margin: 0 0 12px; padding-right: 22px; }
.bbp-cat-article-body ul { list-style: disc; }
.bbp-cat-article-body ol { list-style: decimal; }
.bbp-cat-article-body li { display: list-item; margin: 4px 0; }
.bbp-cat-article-body li::marker { color: var(--bbp-muted, #5c6166); }
.bbp-cat-article a { color: #13719f; text-decoration: underline; text-underline-offset: 2px; }
.bbp-cat-faq { max-width: 68ch; }
.bbp-cat-faq details { padding: 12px 0; border-top: 1px solid var(--bbp-line); }
.bbp-cat-faq details:last-of-type { border-bottom: 1px solid var(--bbp-line); }
.bbp-cat-faq summary { font-weight: 600; cursor: pointer; list-style-position: outside; }
.bbp-cat-faq details p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #4a4f54; }
.bbp-cat-links { display: grid; gap: 8px; font-size: 14px; }
.bbp-cat-links h3 { margin: 6px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #5c6166; }
.bbp-cat-links-up { margin: 0; color: #5c6166; }
.bbp-cat-links ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.bbp-cat-links li a { color: #13719f; text-decoration: none; }
.bbp-cat-links li a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* BlaBlaPrice opens a page like a chat line (components/bot-say.php, owner 2026-10-02: «все має виглядати як чат») */
.bbp-say { display: flex; gap: 14px; align-items: flex-start; max-width: 640px; margin: 18px auto 18px; }
.bbp-say-av { flex: none; width: 17px; height: 26px; margin-top: 1px; fill: var(--bbp-ink); }
.bbp-say-body { flex: 1; min-width: 0; }
.bbp-say-name { display: block; margin: 0 0 2px; font: 600 12px/1.4 "Inter", system-ui, sans-serif; letter-spacing: .02em; color: #62676c; }
.bbp-say-title { margin: 0 0 6px !important; padding: 0 !important; font: 600 21px/1.3 var(--bbp-serif) !important; color: var(--bbp-ink); text-wrap: balance; }
.bbp-say-text { margin: 0; font: 400 16.5px/1.55 var(--bbp-serif); color: var(--bbp-ink); }
.bbp-contacts .bbp-say { margin-top: 4px; }
@media (max-width: 991px) {
    .bbp-say { margin: 14px 14px 14px; gap: 12px; }
    .bbp-contacts .bbp-say { margin: 4px 4px 14px; }
    .bbp-say-title { font-size: 19.5px !important; }
    .bbp-say-text { font-size: 15.5px; }
}

/* the seller's streak and week (components/progress-seller.php, owner 2026-10-02: гейміфікація) */
.bbp-progress-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.bbp-progress-pills li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font: 600 12.5px/1 "Inter", system-ui, sans-serif; white-space: nowrap; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 999px; }
.bbp-progress-pills li.is-hot { background: #fff3e2; border-color: #f3d4a6; }
.bbp-progress-pills li.is-top { color: #13719f; background: #e3f3fb; border-color: #b4def2; }
@media (max-width: 991px) {
    .bbp-progress-pills li { height: 28px; padding: 0 10px; font-size: 12px; }
}

/* the buyer's request on its way: Запит → Пропозиції → Контакти → Угода (components/journey.php) */
.bbp-journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 16px 0 2px; padding: 0; list-style: none; }
.bbp-journey li { position: relative; padding-top: 10px; font: 500 11.5px/1.2 "Inter", system-ui, sans-serif; color: #a0a4a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-journey li::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; border-radius: 4px; background: #e8e5de; }
.bbp-journey li.is-done { color: var(--bbp-muted); }
.bbp-journey li.is-now { font-weight: 700; color: #13719f; }

/* a little party for the good moments (bbp-cards.js bbpConfetti) */
.bbp-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2147483000; }

/* a fresh verdict scrolled into view must not hide under the popup header */
.popup-container.wide .bbp-check-msg, .popup-container.wide .is-fresh, .popup-container.wide .bbp-check-live { scroll-margin-top: 76px; scroll-margin-bottom: 16px; }

/* "Тебе випередили N": the orange count keeps its pill (a later reset took its padding away) */
.bbp-contact-chip.is-warn:not(.is-active) span { min-width: 18px; padding: 1px 5px; border-radius: 10px; }
.bbp-journey li span { color: inherit; font: inherit; }

/* the login popup after a guest pressed "send": the request is kept */
.bbp-auth-draft { display: none; margin: 4px auto 14px; padding: 10px 14px; max-width: 340px; font: 500 14px/1.45 "Inter", system-ui, sans-serif; color: #13719f; background: #e3f3fb; border-radius: 12px; text-align: center; }
body[data-bbp-draft] .bbp-auth-draft { display: block; }

/* flash messages as BlaBlaPrice's line (layouts/main.php, owner 2026-10-02) instead of the "Трапилась помилка!" modal */
.bbp-toast { position: fixed; top: 14px; right: 50%; z-index: 100000; display: flex; gap: 12px; align-items: flex-start; width: min(520px, calc(100vw - 24px)); padding: 14px 16px 14px 10px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 16px; box-shadow: 0 14px 34px rgba(20, 24, 28, .16); transform: translateX(50%); animation: bbp-toast-in .25s ease-out; }
.bbp-toast.is-error { background: #fffaf2; border-color: #f0d6ad; }
.bbp-toast .bbp-say-av { margin-top: 2px; }
.bbp-toast-body { flex: 1; min-width: 0; }
.bbp-toast-body p { margin: 0; font: 400 15.5px/1.5 var(--bbp-serif); color: var(--bbp-ink); overflow-wrap: anywhere; }
.bbp-toast-x { flex: none; width: 32px; height: 32px; margin: -4px 0 0; padding: 0; font: 400 22px/1 "Inter", system-ui, sans-serif; color: #62676c; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-toast-x:hover { background: #f0f2f5; }
.bbp-toast.is-leaving { opacity: 0; transform: translate(50%, -8px); transition: opacity .2s, transform .2s; }
@keyframes bbp-toast-in { from { opacity: 0; transform: translate(50%, -8px); } to { opacity: 1; transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .bbp-toast { animation: none; } }

/* PHONE LISTS (owner 2026-10-03: «на телефоні сторінки з карточками дуже забиті, потрібно більше простору перед
   карточками, а в карточках все лишнє забрати і залишити головне»). Everything hidden here is still in the chat popup. */
@media (max-width: 991px) {
    /* room before the cards: BlaBlaPrice says one short line, then air */
    #main .bbp-say-list { margin: 20px 16px 22px; }
    #main .bbp-say-list .bbp-say-text { display: none; }
    #main .bbp-say-list .bbp-say-title { margin: 0 !important; font-size: 18px !important; line-height: 1.35 !important; }
    #main .bbp-say-list .bbp-progress-pills { margin-top: 10px; }
    #main .bbp-seen-chips, #main .bbp-contact-chips { margin-bottom: 18px !important; }
    #main .request.open-popup + .request.open-popup, #main .bbp-contact.request.open-popup { margin-top: 0; margin-bottom: 16px; }
    #main .request.open-popup { margin-bottom: 16px; }

    /* every card: no dates, the text in 3 lines */
    #main .request.open-popup .message .date,
    #main .request.open-popup .bbp-msg-aside { display: none !important; }
    #main .request.open-popup .message .comment { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

    /* buyer's request: the text, "Порівняти пропозиції", how many and how long */
    #main .request.open-popup .bbp-card-verdict-box,
    #main .request.open-popup .bbp-card-share { display: none !important; }
    #main .request.open-popup .bbp-journey { margin-top: 12px; }
    #main .request.open-popup .bbp-card-offers { margin-top: 12px !important; }
    #main .request.open-popup .bbp-card-offers::before,
    #main .request.open-popup .bbp-card-offers .text::before { display: none !important; }
    #main .request.open-popup .bbp-card-offers .text { padding: 0 !important; }
    #main .request.open-popup .bbp-card-said { display: none; }
    #main .request.open-popup .bbp-card-offers .bbp-card-cta { margin-right: 0 !important; padding: 7px 14px; font-size: 14px; border-radius: 16px; }

    /* a request for a seller: the buyer's avatar and name and the contacts the buyer left, as on a computer
       (owner 2026-10-03); no repeated category; a small photo */
    #main .request.open-popup[data-rel^="seller-"] .message .title,
    #main .request.open-popup[data-rel="seller-offer"] .request-body > .text-right,
    #main .request.open-popup[data-rel="seller-offer"] .bbp-meta[title^="Сила пропозиції"] { display: none !important; }
    #main .request.open-popup .message .region { font-size: 13px; }
    #main .request.open-popup .message img { max-width: 76px !important; max-height: 76px !important; object-fit: cover; border-radius: 10px; }

    /* contacts: who, how to reach, what to do */
    #main .bbp-contact .bbp-ask-bubble { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
    #main .bbp-contact .bbp-contact-remind,
    #main .bbp-contact .bbp-meta-review,
    #main .bbp-contact .bbp-meta.is-empty { display: none !important; }
    #main .bbp-contact .bbp-card-meta:not(:has(> :not(.bbp-meta-review):not(.is-empty))) { display: none; }
}

/* the card opens a chat: a thin ↗ in its corner, no circle (owner 2026-10-03: first «сильнішу»,
   then «інший значок, менш помітний, але стильний і приємний», «без кола»); the whole card still opens it */
#main .request.open-popup .request-head .controls { display: flex !important; align-items: center; margin-right: 10px; }
#main .request.open-popup .request-head .controls button {
    display: inline-flex !important; align-items: center; justify-content: center; flex: none;
    width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0 !important;
    color: #62676c; background: transparent !important; border: 0 !important; border-radius: 0 !important;
    cursor: pointer; transition: background .2s, color .2s, transform .2s;
}
#main .request.open-popup .request-head .controls button svg { display: none !important; }
#main .request.open-popup .request-head .controls button::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
#main .request.open-popup:hover .request-head .controls button { color: var(--bbp-ink); background: transparent !important; transform: translate(-2px, -2px); }
#main .request.open-popup:active .request-head .controls button { transform: scale(.94); }

/* ===== the web app: install, phone notifications, the owner's metrics (owner 2026-10-03) ===== */
[data-bbp-install][hidden], [data-bbp-push][hidden], .bbp-notify-ask[hidden] { display: none !important; }

/* the gentle ask on list pages */
.bbp-notify-ask { display: flex; align-items: center; gap: 10px; max-width: 640px; margin: -4px auto 18px; padding: 10px 14px 10px 8px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 14px; }
.bbp-notify-ic { flex: none; display: inline-flex; color: #13719f; }
.bbp-notify-ask p { flex: 1; min-width: 0; margin: 0; font: 500 14px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-notify-ask .t-ios { display: none; }
.bbp-notify-ask.is-ios .t-ios { display: inline; }
.bbp-notify-ask.is-ios .t-push { display: none; }
.bbp-notify-yes { flex: none; height: 32px; padding: 0 14px; font: 600 13px/1 "Inter", system-ui, sans-serif; color: #fff; background: var(--bbp-ink); border: 0; border-radius: 10px; cursor: pointer; }
.bbp-notify-yes:hover { background: #3a4045; }
.bbp-notify-yes span { color: inherit !important; }
.bbp-notify-x { flex: none; width: 30px; height: 30px; padding: 0; font: 400 20px/1 "Inter", system-ui, sans-serif; color: #62676c; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-notify-x:hover { background: #f0f2f5; }
.bbp-notify-ask.is-done .bbp-notify-yes, .bbp-notify-ask.is-done .bbp-notify-x { display: none; }
@media (max-width: 991px) { .bbp-notify-ask { margin: -8px 14px 18px; } }

/* settings: "Сповіщення на телефон" */
.bbp-notify-card { margin-top: 16px; }
.bbp-notify-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--bbp-line); }
.bbp-notify-row:first-of-type { border-top: 0; }
.bbp-notify-row > div { min-width: 0; }
.bbp-notify-row b { display: block; font: 600 15px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-notify-row .bbp-set-hint { display: block; margin: 2px 0 0; }
.bbp-notify-row form { margin: 0; }
.bbp-notify-row .bbp-btn-primary, .bbp-notify-row .bbp-btn-light { flex: none; white-space: nowrap; }

/* iPhone: how to put the app on the home screen */
.bbp-ios-help { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(20, 24, 28, .35); }
.bbp-ios-card { display: flex; gap: 12px; width: min(460px, 100%); padding: 18px 18px 16px; background: #fff; border-radius: 18px; box-shadow: 0 18px 40px rgba(20, 24, 28, .25); }
.bbp-ios-card .bbp-say-av { flex: none; margin-top: 2px; }
.bbp-ios-title { margin: 0 0 8px; font: 600 19px/1.3 var(--bbp-serif); color: var(--bbp-ink); }
.bbp-ios-card ol { margin: 0 0 14px; padding-right: 20px; font: 400 15.5px/1.55 var(--bbp-serif); color: var(--bbp-ink); }

/* the owner's metrics */
.bbp-metrics-funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bbp-metrics-funnel div { display: flex; flex-direction: column; gap: 4px; }
.bbp-metrics-funnel b { font: 600 26px/1.1 var(--bbp-serif); color: var(--bbp-ink); }
.bbp-metrics-funnel span { font: 500 12.5px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-metrics-h { margin: 0 0 12px; font: 600 17px/1.3 var(--bbp-serif); }
.bbp-metrics-scroll { overflow-x: auto; margin: 0 -4px 10px; }
.bbp-metrics-table { width: 100%; border-collapse: collapse; font: 500 13px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-metrics-table th { padding: 6px 8px; font-weight: 600; font-size: 12px; color: var(--bbp-muted); text-align: left; vertical-align: bottom; white-space: normal; min-width: 72px; }
.bbp-metrics-table th:first-child, .bbp-metrics-table td:first-child { text-align: right; white-space: nowrap; }
.bbp-metrics-table td { padding: 8px; text-align: left; border-top: 1px solid var(--bbp-line); white-space: nowrap; }
.bbp-metrics-table td small { color: var(--bbp-muted); font-size: 11.5px; }
.bbp-metrics-table tr.is-now td { font-weight: 700; background: #f6f4ef; }
.bbp-metrics-list { margin: 0; padding: 0; list-style: none; font: 500 14px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-metrics-list li { padding: 6px 0; border-top: 1px solid var(--bbp-line); }
.bbp-metrics-list li:first-child { border-top: 0; }
@media (max-width: 991px) {
    .bbp-metrics-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bbp-metrics-funnel div:first-child { grid-column: 1 / -1; }
}

/* ===== "Мій прайс" (owner 2026-10-03) ===== */
.bbp-pl-ask { display: flex; align-items: center; gap: 10px; max-width: 640px; margin: -4px auto 18px; padding: 10px 14px 10px 8px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 14px; }
.bbp-pl-ask[hidden] { display: none !important; }
.bbp-pl-ask p { flex: 1; min-width: 0; margin: 0; font: 500 14px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-pl-ask .bbp-notify-yes { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 991px) { .bbp-pl-ask { margin: -8px 14px 18px; } .bbp-desk-only { display: none !important; } }
.bbp-offer-src.is-similar { color: #8a5a00; background: #fbf0d9; }
.bbp-offer-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; }
.bbp-offer-tags .bbp-offer-src { margin-left: 0; }
.bbp-offer-src { display: inline-flex; align-self: flex-start; width: max-content; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; font: 600 11px/1 "Inter", system-ui, sans-serif; color: #13719f; background: #e3f3fb; border-radius: 999px; }

.bbp-pl-source { margin: 0 0 8px; font: 500 14px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-muted); overflow-wrap: anywhere; }
.bbp-pl-source b { color: var(--bbp-ink); }
.bbp-pl-status { margin: 0 0 10px; font: 600 15px/1.4 "Inter", system-ui, sans-serif; }
.bbp-pl-status.is-ok { color: #2e8b57; }
.bbp-pl-status.is-busy { color: #13719f; }
.bbp-pl-bar { height: 6px; margin: 0 0 14px; background: #e8e5de; border-radius: 6px; overflow: hidden; }
.bbp-pl-bar i { display: block; height: 100%; background: #229ed9; border-radius: 6px; transition: width .4s; }
.bbp-pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.bbp-pl-stats li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #f6f4ef; border-radius: 12px; }
.bbp-pl-stats b { font: 600 22px/1.15 var(--bbp-serif); color: var(--bbp-ink); }
.bbp-pl-stats span { font: 500 12.5px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-pl-forms { display: grid; gap: 10px; margin-top: 14px; }
.bbp-pl-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.bbp-pl-form input[type="url"] { flex: 1 1 240px; min-width: 0; height: 42px; padding: 0 12px; font: 500 14px "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 12px; }
.bbp-pl-form small { flex-basis: 100%; color: var(--bbp-muted); font: 500 12px "Inter", system-ui, sans-serif; }
.bbp-pl-file { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; max-width: 100%; font: 600 14px "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #f6f4ef; border: 1px dashed #cfcac0; border-radius: 12px; cursor: pointer; overflow: hidden; }
.bbp-pl-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-pl-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bbp-pl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.bbp-pl-actions form { margin: 0; }
.bbp-pl-remove { padding: 0; font: 600 13px "Inter", system-ui, sans-serif; color: #b4443a; background: none; border: 0; cursor: pointer; }
.bbp-pl-remove:hover { text-decoration: underline; }
.bbp-pl-tpl { display: grid; gap: 12px; margin: 0; }
/* rows typed by hand (owner 2026-10-03) */
.bbp-pl-manual { display: grid; gap: 8px; margin: 12px 0 0; }
.bbp-pl-manual input, .bbp-pl-manual textarea { width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px 12px; font: 500 14px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 12px; }
.bbp-pl-manual textarea { resize: vertical; }
.bbp-pl-manual > .bbp-btn-primary { justify-self: start; }
.bbp-pl-mine { margin-top: 14px; }
/* "Мої ціни": examples first, then the seller's rows with how the category is found (owner 2026-10-03) */
.bbp-pl-cap { margin: 16px 0 4px; font: 700 13px "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-pl-table { width: 100%; margin: 0 0 10px; border-collapse: collapse; font: 500 14px/1.4 "Inter", system-ui, sans-serif; }
.bbp-pl-table th { padding: 8px; text-align: right; font: 600 12px "Inter", system-ui, sans-serif; color: var(--bbp-muted); border-bottom: 1px solid var(--bbp-line); }
.bbp-pl-table td { padding: 10px 8px; vertical-align: top; color: var(--bbp-ink); border-bottom: 1px solid var(--bbp-line); }
.bbp-pl-table th:first-child, .bbp-pl-table td:first-child { padding-right: 0; }
.bbp-pl-table tr:last-child td { border-bottom: 0; }
.bbp-pl-table.is-example td { color: var(--bbp-muted); }
.bbp-pl-t-price { white-space: nowrap; font-weight: 700; }
.bbp-pl-t-cat { font-size: 12.5px; color: var(--bbp-muted); }
.bbp-pl-t-ok { color: #2e8b57; }
.bbp-pl-t-wait { color: #13719f; }
.bbp-pl-t-wait i { font-style: normal; animation: bbp-pl-dot 1.2s infinite; }
.bbp-pl-t-wait i:nth-child(2) { animation-delay: .2s; }
.bbp-pl-t-wait i:nth-child(3) { animation-delay: .4s; }
@keyframes bbp-pl-dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.bbp-pl-t-warn { color: #b4443a; font-weight: 600; }
.bbp-pl-table tr.is-ask td { background: #fdf6e7; }
@media (max-width: 600px) {
    .bbp-pl-table thead { display: none; }
    .bbp-pl-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--bbp-line); }
    .bbp-pl-table tr:last-child { border-bottom: 0; }
    .bbp-pl-table td { padding: 0; border: 0; background: none !important; }
    .bbp-pl-table .bbp-pl-t-cat { grid-column: 1 / -1; }
    .bbp-pl-table tr.is-ask { background: #fdf6e7; border-radius: 10px; padding: 10px; }
    /* 16px: a phone does not zoom the page in when the field gets the focus */
    .bbp-pl-manual input, .bbp-pl-manual textarea, .bbp-pl-tpl textarea, .bbp-pl-form input[type="url"], .bbp-pl-search input { font-size: 16px; }
}
.bbp-form-msg { margin: 12px 0 0; font: 600 14px/1.45 "Inter", system-ui, sans-serif; color: #2e8b57; }
.bbp-form-msg.is-error { color: #b4443a; }
.bbp-pl-ask-hint { margin: 6px 0 0; font: 600 13px/1.4 "Inter", system-ui, sans-serif; color: #8a5a00; }
.bbp-pl-edit summary { display: inline-block; margin-top: 4px; font: 600 12.5px "Inter", system-ui, sans-serif; color: #13719f; cursor: pointer; list-style: none; }
.bbp-pl-edit summary::-webkit-details-marker { display: none; }
.bbp-pl-edit summary:hover { text-decoration: underline; }
.bbp-pl-edit[open] summary { color: var(--bbp-muted); }
.bbp-pl-edit-row { display: flex; align-items: center; gap: 16px; }
.bbp-pl-tpl textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; font: 500 15px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 12px; resize: vertical; }
.bbp-pl-auto { display: flex; align-items: center; gap: 10px; font: 600 14px "Inter", system-ui, sans-serif; color: var(--bbp-ink); cursor: pointer; }
.bbp-pl-auto input { width: 20px; height: 20px; accent-color: #229ed9; }
.bbp-pl-preview { padding: 12px 14px; background: #f6f4ef; border-radius: 12px; }
.bbp-pl-preview p { margin: 0; font: 400 15px/1.55 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-pl-tpl .bbp-btn-primary { justify-self: start; }
.bbp-pl-auto-list, .bbp-pl-items { margin: 0; padding: 0; list-style: none; }
.bbp-pl-auto-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--bbp-line); font: 500 14px/1.4 "Inter", system-ui, sans-serif; }
.bbp-pl-auto-list li:first-child { border-top: 0; }
.bbp-pl-auto-list span { font-size: 12.5px; color: var(--bbp-muted); }
.bbp-pl-search { display: flex; gap: 8px; margin: 0 0 10px; }
.bbp-pl-search input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; font: 500 14px "Inter", system-ui, sans-serif; border: 1px solid var(--bbp-line); border-radius: 12px; background: #fff; color: var(--bbp-ink); }
.bbp-pl-items li { padding: 10px 0; border-top: 1px solid var(--bbp-line); }
.bbp-pl-items li:first-child { border-top: 0; }
.bbp-pl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bbp-pl-name { min-width: 0; font: 500 14px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-ink); overflow-wrap: anywhere; }
.bbp-pl-price { flex: none; font: 600 14px "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-pl-items small { display: block; margin-top: 3px; font: 500 12.5px/1.4 "Inter", system-ui, sans-serif; color: #2e8b57; }
.bbp-pl-items li.is-wait small { color: #13719f; }
.bbp-pl-items li.is-off small, .bbp-pl-items li.is-gone small { color: var(--bbp-muted); }
.bbp-pl-items li.is-gone .bbp-pl-name, .bbp-pl-items li.is-gone .bbp-pl-price { color: var(--bbp-muted); text-decoration: line-through; }
.bbp-pl-pages { display: flex; gap: 8px; margin-top: 12px; }

/* One blue everywhere: Telegram's #1a7cad since 2026-10-04 (owner: «кольори всіх синіх кнопок — як лого», was #346cbc);
   text in it is one step deeper (#13719f) on the light page; the dark theme uses its light #89d0f2 (dark.css). */
:root { --bs-blue: #229ed9; --bs-primary: #229ed9; --bs-primary-rgb: 34, 158, 217; --bs-link-color: #1a7cad; --bs-link-color-rgb: 52, 108, 188; --bs-link-hover-color: #1d739d; --bs-link-hover-color-rgb: 36, 82, 150; }
.drop-menu > a, .input-checkbox .checkbox:after, .input-radio .radio:after, .home-category ul li { background: #229ed9; }
.drop-menu .drop a svg { fill: #1a7cad; }
.popup-button.dark, .sub-menu .back-menu { color: #13719f; }
.sub-menu .back-menu:before { border-left-color: #229ed9; }
.seller-filter .item-accordeon.selected { border-color: #229ed9; }

/* One menu for buying and selling (owner 2026-10-03): the "Купую" / "Продаю" groups, a line, the balance in a quiet pill */
.bbp-nav .bbp-nav-group { list-style: none; margin: 16px 0 2px; padding: 0 12px; font: 700 11.5px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--bbp-muted); }
.bbp-nav li.bbp-nav-group:first-child { margin-top: 6px; }
.bbp-nav .bbp-nav-sep { height: 1px; margin: 12px 12px 8px; padding: 0; background: var(--bbp-line); }
.bbp-nav a .count.bbp-nav-bal { color: var(--bbp-ink) !important; background: #eceae4 !important; }
.bbp-nav a.bbp-nav-new { color: #13719f; font-weight: 600; }
.bbp-nav a.bbp-nav-new svg { stroke: #1a7cad; }

/* a strong offer keeps its "what to add" folded (owner 2026-10-03: less text) */
.bbp-crit-fold { margin: 6px 0 0; }
.bbp-crit-fold > summary { display: inline-block; font: 600 13px "Inter", system-ui, sans-serif; color: #13719f; cursor: pointer; list-style: none; }
.bbp-crit-fold > summary::-webkit-details-marker { display: none; }
.bbp-crit-fold > summary::after { content: " ›"; }
.bbp-crit-fold[open] > summary::after { content: " ⌄"; }

/* a review sent before a rating: what is missing, and the ratings nudge (owner 2026-10-03) */
.bbp-rate-hint { flex: 1 0 100%; margin: 0 0 6px; font: 600 13px/1.3 "Inter", system-ui, sans-serif; color: #b4443a; }
.button-reviews.bbp-shake { animation: bbp-shake .4s; }
@keyframes bbp-shake { 0%, 100% { transform: none; } 25% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }

/* a side with nothing new but a review to leave: a dot alone, not "0" with a dot */
aside .count.bbp-count-dot, #header .aside-menu .count.bbp-count-dot {
    min-width: 8px !important; width: 8px !important; height: 8px !important; padding: 0 !important;
    font-size: 0 !important; line-height: 0 !important; border-radius: 50% !important; background: #229ed9 !important;
}

/* "Купую" / "Продаю" open like the account menu at the bottom (owner 2026-10-03): each side is a white card, its button on top,
   its links below when open; a closed side shows its number on the button */
.bbp-nav .bbp-nav-side { list-style: none; margin: 0 0 8px; padding: 4px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 16px; }
.bbp-nav .bbp-nav-side:first-child { margin-top: 6px; }
.bbp-nav-head {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; margin: 0; padding: 0 12px 0 10px; box-sizing: border-box;
    font: 600 15px/1.2 "Inter", system-ui, sans-serif; color: var(--bbp-ink); text-align: right;
    background: transparent; border: 0; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bbp-nav-head .icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; }
.bbp-nav-head .icon svg { width: 20px; height: 20px; fill: #3d4247; }
.bbp-nav-head > span:not(.bbp-nav-chev) { flex: 1; min-width: 0; }
.bbp-nav-head .count {
    min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font: 700 12px/1 "Inter", system-ui, sans-serif; position: relative;
}
.bbp-nav-head .count.bbp-count-total { color: var(--bbp-ink); background: #eceae4; }
.bbp-nav-head .count.bbp-count-total.has-new { margin-left: 6px; }
.bbp-nav-head .count.bbp-count-total.has-new::after {
    content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%; background: #229ed9; box-shadow: 0 0 0 2px #fff;
}
.bbp-nav-head .count.bbp-count-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; background: #229ed9; }
.bbp-nav-side.is-open > .bbp-nav-head .count { display: none; }
.bbp-nav-chev { display: inline-flex; flex: none; color: #62676c; transition: transform .2s; }
.bbp-nav-side.is-open > .bbp-nav-head .bbp-nav-chev { transform: rotate(-180deg); }
.bbp-nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.bbp-nav-side.is-open > .bbp-nav-sub { grid-template-rows: 1fr; }
.bbp-nav-sub > ul { min-height: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.bbp-nav-side.is-open > .bbp-nav-sub > ul { padding-top: 2px !important; }
.bbp-nav-side .bbp-nav-sub a.link:hover { background: #f0f2f5; }
.bbp-nav-side .bbp-nav-sub a.link.active, .bbp-nav-side .bbp-nav-sub a.link.active:hover { background: #f0f2f5; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .bbp-nav-sub, .bbp-nav-chev { transition: none; } }
/* line icons in the side menus keep their outline (the old rule filled every svg: the phone, the gift, the sparkles) */
.aside-menu svg.bbp-icon, #aside-left .foot svg.bbp-icon { fill: none !important; }

/* the theme: two buttons in the settings, a row in a guest's sidebar (owner 2026-10-03) */
.bbp-theme-pick { display: flex; gap: 8px; margin-top: 10px; }
.bbp-theme-pick button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 14px;
    font: 600 14.5px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff;
    border: 1px solid var(--bbp-line); border-radius: 12px; cursor: pointer;
}
.bbp-theme-pick button.is-on { color: #13719f; background: #e2f2fa; border-color: #a5d6ee; }
.bbp-theme-pick svg, .bbp-theme-row svg { width: 18px; height: 18px; fill: none !important; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bbp-theme-pick svg.is-always { display: block !important; }
.bbp-theme-row .bbp-sun { display: none; }
html[data-theme="dark"] .bbp-theme-row .bbp-moon { display: none; }
html[data-theme="dark"] .bbp-theme-row .bbp-sun { display: block; }
.bbp-theme-row .icon { color: #3d4247; }
@media (max-width: 991px) {
    /* the links of the "Купую" / "Продаю" cards: the icon and the word keep the same air as the rest of the menu */
    #aside-left .bbp-nav a.link > span { margin-right: 0 !important; }
}
.bbp-theme-pick button span, .bbp-theme-row span { color: inherit !important; }
.bbp-set-card.bbp-theme-card { margin-top: 14px; }

/* PHONE HEADER of a two-sided account (owner 2026-10-03): ☰ · "Купую | Продаю" (the sign-up popup's switch) · 🎁.
   No "+ Новий запит" and no share here: the request starts from the menu; the search sits above the cards. */
.bbp-headswitch { display: none; }
@media (max-width: 991px) {
    #header .head-main > .bbp-headswitch { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; margin: 0 4px 0 0; }
    .bbp-headswitch .bbp-mode { display: grid; flex: 1 1 auto; width: auto; max-width: 300px; margin: 0 auto; }
    .bbp-headswitch .bbp-mode-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 36px;
        font-size: 14px; text-decoration: none; white-space: nowrap;
    }
    .bbp-headswitch .bbp-mode-btn.is-active { cursor: pointer; }
    .bbp-headswitch .bbp-mode-n {
        display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
        font: 700 11px/1 "Inter", system-ui, sans-serif; font-style: normal; color: #fff; background: #229ed9; border-radius: 9px;
    }
    .bbp-headswitch .bbp-mode-dot { position: static; flex: none; }
    .bbp-head-gift { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; color: #3d4247; border-radius: 50%; }
    .bbp-head-gift.is-on { color: #13719f; background: #e2f2fa; }
    .bbp-head-gift svg { fill: none !important; }
    #header .head-main:has(> .bbp-headswitch) > .bbp-head-new,
    #header .head-main:has(> .bbp-headswitch) > .head-social { display: none !important; }
    #header .head-main:has(> .bbp-headswitch) { gap: 4px; }
}

/* the request field under the buyer's list (owner 2026-10-03): the home composer, docked like a chat input,
   as wide as the cards */
.bbp-list-dock { box-sizing: border-box; width: 100%; max-width: 640px; margin: 8px auto 0; }
.center:has(> .bbp-list-dock) { padding-bottom: 0 !important; }
@media (max-width: 991px) {
    .bbp-list-dock { max-width: none; padding-right: 12px; padding-left: 12px; }
}
/* under the list the field is one low row (text, then the photo and send buttons): the cards keep the screen */
.bbp-list-dock .bbp-composer { display: flex !important; align-items: flex-end; gap: 8px; padding: 6px 16px 6px 6px !important; }
.bbp-list-dock .bbp-assist-text { flex: 1 1 auto; width: auto; min-height: 44px; padding: 10px 0; font-size: 16px; }
.bbp-list-dock .bbp-composer-bar { flex: none; gap: 6px; align-items: center; }
.bbp-list-dock .bbp-home-note { flex-basis: 100%; }
@media (max-width: 991px) { .bbp-list-dock { padding-top: 12px !important; } }
/* the filter page's category search stays on screen under the header while the long list scrolls (owner 2026-10-03);
   a ring of the page colour hides the list sliding under it */
.seller-filter .bbp-filter-search { position: sticky; top: calc(var(--bbp-head-h, 59px) + 10px); z-index: 14; box-shadow: 0 0 0 10px #faf9f5; }
@media (max-width: 991px) { .seller-filter .bbp-filter-search { box-shadow: 0 0 0 10px #f3f1ea; } }

/* the request's way says what happened (owner 2026-10-03/04): each line filled to --fill in the text colour; only
   "Запит" is coloured — red / yellow / green, 15 / 50 / 100 % by how clear the request is; the offers' step breathes
   while sellers can answer (the popup's bbp-breathe); labels may take two lines ("Надсилання пропозицій") */
.bbp-journey li { --bar: #4a5056; cursor: default; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25 !important; }
.bbp-journey li::before { background: linear-gradient(-90deg, var(--bar) 0 var(--fill, 0%), #e8e5de var(--fill, 0%) 100%) !important; }
/* plain words (owner 2026-10-04): "Запит" in the usual dark text, the step in progress not bold; only the line is coloured */
.bbp-journey li.is-now { color: var(--bbp-ink); font-weight: 500 !important; }
.bbp-journey li.tone-bad, .bbp-journey li.tone-ok, .bbp-journey li.tone-good { color: var(--bbp-ink) !important; }
.bbp-journey li.tone-bad { --bar: #e0573e; }
.bbp-journey li.tone-ok { --bar: #e8b23a; }
.bbp-journey li.tone-good { --bar: #3a9d5d; }
.bbp-journey li.is-live { animation: bbp-breathe 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bbp-journey li.is-live { animation: none; } }
/* the scale says how many offers there are: the footer does not repeat it */
.request.open-popup .bbp-meta.bbp-meta-offers { display: none; }
.bbp-contact .bbp-journey { margin: 14px 0 4px; }

/* the colourful mark (owner 2026-10-04, «М'які іграшки»): the light logo here, the dark one in dark.css; the chat disc
   gets the new picture (a new address so browsers do not keep the old black one) */
.bbp-logo-dark { display: none !important; }

/* the round Telegram-blue icon (owner 2026-10-04, variant 6): BlaBlaPrice's avatar is a circle now, the header shows
   the icon and the full name */
.bbp-say-av { width: 26px !important; height: 26px !important; border-radius: 50%; }
.blabla-comment::before, .blabla-comment:before { background-image: url("/blabla/img/icon-logo.png?v=3") !important; background-size: 26px 26px !important; background-position: center !important; background-color: transparent !important; }
#aside-left .head .logo { width: auto !important; }
#aside-left .head .logo img { height: 32px !important; width: auto !important; }
@media (max-width: 991px) { #aside-left .head .logo img { height: 28px !important; } }

/* photos (owner 2026-10-04): a person's picture fills the round avatar; BlaBlaPrice's icon is as big as people's avatars */
.bbp-av.bbp-av-photo, .avatar.bbp-av-photo { padding: 0 !important; overflow: hidden; background: #e9e6df !important; }
.bbp-av-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#aside-left .link-btn .avatar.bbp-av-photo { border-radius: 50%; }
.bbp-say-av { width: 36px !important; height: 36px !important; margin-top: 0 !important; }
.bbp-say { gap: 12px; }
.blabla-comment::before, .blabla-comment:before { width: 36px !important; min-width: 36px !important; height: 36px !important; background-size: 36px 36px !important; }
.popup-container.wide .blabla-comment::before { flex: 0 0 36px !important; height: 36px !important; background-position: center !important; }
/* settings: the photo and its two buttons */
.bbp-set-avatar { display: flex; align-items: center; gap: 16px; margin: 4px 0 14px; }
.bbp-set-av { width: 64px; height: 64px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font: 700 22px/1 "Inter", system-ui, sans-serif; }
.bbp-set-av-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bbp-set-av-pick { position: relative; overflow: hidden; cursor: pointer; }
.bbp-set-av-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bbp-set-av-remove { height: 40px; padding: 0 12px; font: 600 14px/1 "Inter", system-ui, sans-serif; color: #62676c; background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
/* the offers list: the sellers' avatars as big as everywhere else */
.bbp-offer-top > .bbp-av { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; }

/* TELEGRAM-STYLE ICONS (owner 2026-10-04): a white glyph on a coloured rounded square (--c), like Telegram's settings;
   menus, card heads and hints have them; small icons next to words stay plain */
.tg-ic { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: none !important;
    width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; border-radius: 8px !important;
    background: var(--c, #8e8e93) !important; color: #fff !important; opacity: 1 !important; }
.tg-ic svg { width: 17px !important; height: 17px !important; margin: 0 !important; opacity: 1 !important; }
.tg-ic svg:not(.bbp-icon):not(.bbp-moon):not(.bbp-sun), .tg-ic svg:not(.bbp-icon):not(.bbp-moon):not(.bbp-sun) use { fill: #fff !important; }
.tg-ic svg.bbp-icon, .tg-ic .bbp-moon, .tg-ic .bbp-sun { fill: none !important; stroke: #fff !important; color: #fff !important; }
#aside-left .aside-menu a.link .icon.tg-ic, .bbp-nav-head .icon.tg-ic { width: 28px !important; height: 28px !important; }
#aside-left .aside-menu a.link .icon.tg-ic svg, .bbp-nav-head .icon.tg-ic svg { width: 17px !important; height: 17px !important; }
#aside-left .foot > ul li .tg-ic, #aside-left .foot ul li a .tg-ic, #aside-left .foot ul li button .tg-ic { width: 28px !important; height: 28px !important; }
#aside-left .foot > ul li .tg-ic svg { width: 16px !important; height: 16px !important; opacity: 1 !important; }
.bbp-agent-tile.tg-ic { width: 38px !important; height: 38px !important; border-radius: 11px !important; }
.bbp-agent-tile.tg-ic svg { width: 20px !important; height: 20px !important; }
.bbp-perk-ic.tg-ic { width: 30px !important; height: 30px !important; border-radius: 9px !important; }
.bbp-notify-ic.tg-ic svg { width: 16px !important; height: 16px !important; }
.bbp-head-gift .tg-ic { width: 30px !important; height: 30px !important; }
.bbp-head-gift .tg-ic svg { width: 18px !important; height: 18px !important; }
.bbp-head-gift.is-on { background: transparent !important; }

/* the left panel (owner 2026-10-04): every tile grey like «Налаштування», the page you are on in its own colour;
   «Купую» / «Продаю» in colour when the page belongs to that side */
#aside-left .tg-ic { background: #8e8e93 !important; }
#aside-left a.active .tg-ic, #aside-left a.link.active .tg-ic, #aside-left .bbp-nav-side.is-here > .bbp-nav-head .tg-ic { background: var(--c, #8e8e93) !important; }

/* «Купую» / «Продаю» always in colour: they are the two main parts (owner 2026-10-04); the logo's round icon as big as
   people's avatars (36 px) */
#aside-left .bbp-nav-side > .bbp-nav-head .tg-ic { background: var(--c, #8e8e93) !important; }
#aside-left .head .logo img { height: 36px !important; width: auto !important; }
@media (max-width: 991px) { #aside-left .head .logo img { height: 36px !important; } }

/* the old theme caps the logo at 110 px wide, which squeezed the new round icon + name: no cap, the height decides */
#aside-left .head .logo, #aside-left .head .logo img { max-width: none !important; }
#aside-left .head .logo { flex: 0 0 auto !important; }

/* the request's way in the buttons' blue (owner 2026-10-04: «як логотип замість темного»); «Запит» keeps red / yellow /
   green; the offers' step keeps breathing while sellers can answer */
.bbp-journey li { --bar: #229ed9; }
.bbp-journey li.tone-bad { --bar: #e0573e; }
.bbp-journey li.tone-ok { --bar: #e8b23a; }
.bbp-journey li.tone-good { --bar: #3a9d5d; }
.bbp-journey li::before { background: linear-gradient(-90deg, var(--bar) 0 var(--fill, 0%), #e2f2fa var(--fill, 0%) 100%) !important; }
/* the country next to the logo: on its middle line */
#aside-left .head { align-items: center !important; }
#aside-left .head .blabla_country { margin-top: 0 !important; align-self: center !important; }

/* chat headers (owner 2026-10-04): the category bigger and in line with its icon; under it, at the text's edge, how long
   the request runs or «Збережено» with the archive button */
.popup-container.wide .request-head .title { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 18px/1.3 "Inter", system-ui, sans-serif !important; color: var(--bbp-ink); }
.popup-container.wide .request-head .title .bbp-head-icon { width: 22px; justify-content: center; color: #5c6166; }
.popup-container.wide .request-head .title .bbp-head-icon .bbp-icon { width: 20px; height: 20px; }
.popup-container.wide .request-head .from { display: flex; align-items: center; gap: 12px; margin: 2px 32px 0 0 !important; font: 500 13px/1.4 "Inter", system-ui, sans-serif !important; color: #5c6166; }
.popup-container.wide .request-head .from:empty { display: none; }
.bbp-head-saved { color: #2f7a3e; font-weight: 600; }
.bbp-archive-btn { height: auto; margin: 0; padding: 0; font: 600 13px/1.4 "Inter", system-ui, sans-serif; color: #13719f; background: none; border: 0; cursor: pointer; }
.bbp-archive-btn:disabled { opacity: .5; }
@media (max-width: 991px) {
    .popup-container.wide .request-head .title { font-size: 16.5px !important; }
    .popup-container.wide .request-head .from { font-size: 12.5px !important; }
}
/* a long category name ends with «…» instead of being cut mid-letter */
.request-head .title { min-width: 0; }
.request-head .title .bbp-head-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* settings: whom each contact goes to, a small select next to the field (owner 2026-10-04) */
.bbp-set-contact { grid-template-columns: 1fr 150px; }
.bbp-set-to { width: 100%; height: 42px; margin: 0 0 10px; padding: 0 10px 0 28px; font: 500 13px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); text-overflow: ellipsis;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7075' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat left 10px center;
    border: 1px solid var(--bbp-line); border-radius: 10px; -webkit-appearance: none; appearance: none; cursor: pointer; }
@media (max-width: 575px) {
    /* still next to the field: the name above, the field and the select in one line */
    .bbp-set-contact { grid-template-columns: minmax(0, 1fr) 132px; align-items: end; gap: 8px; }
    .bbp-set-contact .bbp-set-row input { min-width: 0; }
    .bbp-set-to { padding: 0 10px 0 24px; font-size: 12.5px; background-position: left 8px center; }
}

/* popups (owner 2026-10-04): a back arrow before the category, no cross on the right; «⋯» takes the cross's place */
.request-head .title .close-popup-all.bbp-head-back {
    position: static !important; inset: auto !important; transform: none !important; flex: none;
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -6px -8px -6px 0; padding: 0;
    color: var(--bbp-ink); background: transparent !important; border: 0 !important; border-radius: 50%; cursor: pointer;
}
.request-head .title .close-popup-all.bbp-head-back:hover { background: #f0f2f5 !important; }
.request-head .title .close-popup-all.bbp-head-back svg { width: 22px; height: 22px; fill: none !important; stroke: currentColor !important; }
.popup-container.wide .request-head .from { margin-right: 68px !important; }
.popup-container.wide .request-head .title:not(:has(.bbp-head-icon)) ~ .from { margin-right: 36px !important; }
.drop-menu.bbp-head-menu { left: 12px; }
.popup-container.wide .request-head > div:first-child { padding-left: 52px; }
@media (min-width: 992px) {
    .drop-menu.bbp-head-menu { left: 22px; }
}

.request-head .title .close-popup-all.bbp-head-back { min-width: 34px !important; width: 34px !important; height: 34px !important; }
/* the old theme capped the popup title at 250 px on phones */
.popup-container.wide .request-head .title { max-width: none !important; }
/* «змінити» in the time line */
.request-body .message .inner .date .bbp-msg-action { position: static; display: inline; margin: 0; font-size: inherit; line-height: inherit; }

/* the three steps as a line with dots (owner 2026-10-04): the buyer is on the first, the next ones are grey */
.bbp-chat .bbp-req-perks.bbp-steps-line { gap: 0 !important; }
.bbp-steps-line li { position: relative; align-items: flex-start !important; gap: 14px !important; padding: 0 0 16px; }
.bbp-steps-line li:last-child { padding-bottom: 0; }
.bbp-steps-line li::before { content: ""; position: absolute; right: 7px; top: 19px; bottom: -3px; width: 2px; background: #dcd9d0; border-radius: 1px; }
.bbp-steps-line li:last-child::before { display: none; }
.bbp-steps-line li.is-now::before { background: linear-gradient(#229ed9, #dcd9d0); }
.bbp-step-dot { flex: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: 3px; border: 2px solid #c4c1b8; border-radius: 50%; }
.bbp-steps-line li.is-now .bbp-step-dot { background: #229ed9; border-color: #229ed9; animation: bbp-step-pulse 2.4s ease-out infinite; }
@keyframes bbp-step-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 158, 217, .45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34, 158, 217, 0); } }
@media (prefers-reduced-motion: reduce) { .bbp-steps-line li.is-now .bbp-step-dot { animation: none; box-shadow: 0 0 0 4px rgba(34, 158, 217, .18); } }
.bbp-steps-line li:not(.is-now) .bbp-step-text { color: #62676c; font-weight: 500; }
.bbp-step-now { display: inline-block; margin-right: 6px; padding: 2px 9px; font: 600 12px/1.4 "Inter", system-ui, sans-serif; font-style: normal; color: #13719f; background: #e2f2fa; border-radius: 999px; vertical-align: 1px; white-space: nowrap; }

/* «Купую» / «Продаю» without icons, in the type of the other menu items (owner 2026-10-04) */
.bbp-nav-head { font-weight: 500; font-size: 12px; }
@media (max-width: 991px) { .bbp-nav-head { font-size: 15px; } }

/* left panel (owner 2026-10-04): the account button is pinned to the bottom and the menus scroll above it;
   its menu opens as a card over the panel instead of pushing everything up */
#aside-left > .wrap > .foot { position: sticky; bottom: 0; z-index: 20; padding-top: 8px !important; background-color: inherit; }
/* the menus fade out under the pinned button instead of being cut */
#aside-left > .wrap > .foot::before { content: ""; position: absolute; right: 0; left: 0; bottom: 100%; height: 18px; background: inherit; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); pointer-events: none; }
#aside-left > .wrap > .foot > ul {
    position: absolute; right: 0; left: 0; bottom: calc(100% + 2px); z-index: 21; margin: 0 !important;
    box-shadow: 0 10px 32px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06) !important;
}
@media (min-width: 992px) {
    #aside-left { position: sticky; top: 0; align-self: start; height: 100vh; }
    #aside-left > .wrap { height: 100vh; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 0 !important; }
    #aside-left > .wrap > .foot { padding-bottom: 10px !important; }
}
@media (max-width: 991px) {
    /* closed until the button is tapped (the old theme kept it open on phones) */
    #aside-left > .wrap > .foot > ul { display: none; }
    #aside-left > .wrap { padding-bottom: 0 !important; }
    #aside-left > .wrap > .foot { padding-bottom: 10px !important; }
}

/* popups are never spaced like cards (the legacy .request + .request gap pushed the contact popup 30px down) */
.popup-wrapper > .popup-content.request { margin-top: 0 !important; }

/* ---------- visual QA 2026-10-04 ---------- */
/* small phones (iPhone SE, 320 px): the menu head fits — the country as an icon, a smaller logo, the close button seen */
@media (max-width: 374px) {
    #aside-left .head .logo img { height: 22px !important; }
    #aside-left .head #lang { font-size: 0 !important; gap: 0 !important; padding: 0 10px !important; margin-left: 6px !important; }
    #aside-left .head .btn-aside-close { flex: 0 0 40px !important; }
    /* an offer: the «Найвигідніша» badge on its own line, the seller's name keeps its width */
    .bbp-offer-top { grid-template-columns: 36px minmax(0, 1fr) !important; }
    .bbp-offer-top .bbp-offer-price { grid-column: 1 / -1; }
    .bbp-offer-top .bbp-offer-price:empty { display: none; }
    /* settings: a narrower select next to each contact */
    .bbp-set-contact { grid-template-columns: minmax(0, 1fr) 108px !important; }
    .bbp-set-to { font-size: 12px !important; padding: 0 8px 0 20px !important; background-position: left 6px center !important; }
}
/* the offers header: the sort switch goes under the title when there is no room */
.bbp-offers-head { flex-wrap: wrap; row-gap: 8px; }
/* desktop: the chips wrap to a second row instead of cutting the sorting off at the edge */
@media (min-width: 992px) {
    /* one row that scrolls sideways (owner 2026-10-05), the edge fades while there is more */
    .bbp-seen-chips { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; overscroll-behavior-x: contain; }
    .bbp-seen-chips::-webkit-scrollbar { display: none; }
    .bbp-seen-chips > * { flex: none !important; }
    .bbp-seen-chips.bbp-has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
}
/* short phone screens: the docked request field takes less room */
@media (max-width: 991px) and (max-height: 700px) {
    /* two lines, the rest scrolls inside (the autosize script sets 3 rows' height inline) */
    .bbp-req2 .bbp-composer-text, .bbp-req-dock .bbp-composer-text { min-height: 44px !important; height: 56px !important; overflow-y: auto; }
    .bbp-home-composer .bbp-assist-text { min-height: 40px !important; }
}
/* desktop: the login / sign-up / country windows dim the whole page, not only the middle column */
@media (min-width: 992px) {
    .popup-wrapper:has(.popup-content.active:is([data-rel="account-login"], [data-rel="registration"], [data-rel="registration-seller"], [data-rel="language"])) {
        right: 0 !important; left: 0 !important; width: auto !important; max-width: none !important;
    }
}
/* the guest's share button: a finger-sized target */
#header .head-social > button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
/* guest menu: the theme row lines up with the others (the -9px is meant for «Контакти клієнтів») */
@media (max-width: 991px) { #aside-left .aside-menu a.link > span[data-bbp-theme-label] { margin-right: 0 !important; } }
/* the sign-in note: its links as big as the note, in blue */
.bbp-auth-note a { font-size: inherit !important; color: #13719f; }
/* API page: inline code breaks only where it must */
.bbp-api code, .bbp-agent code { overflow-wrap: anywhere; word-break: normal; }
/* the account button: a warm hover like the menu items, not cold grey */
#aside-left .foot > .link-btn:hover { background-color: #f0f2f5 !important; }

/* «Прибрати запит»: stop this buyer's requests (owner 2026-10-05) */
.bbp-block-buyer { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 12px; font: 500 14px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-ink); cursor: pointer; }
.bbp-block-buyer input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #229ed9; }
/* settings: the hidden buyers */
.bbp-blocked-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bbp-blocked-list li { display: flex; align-items: center; gap: 12px; }
.bbp-blocked-list .bbp-av { flex: none; width: 36px; height: 36px; }
.bbp-blocked-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-blocked-list form { margin: 0; }
/* the offer's menu: taking it back reads as a careful action */
.bbp-menu-danger { color: #d64545 !important; }

/* button hierarchy (owner 2026-10-05: «чорні менш важливі, сині важливі»): blue = a step of the deal or the page's
   main action (contacts, «Домовились», compare offers, review, top-up, send, save); black stays for the rest
   («Знайти», «Так» for notifications, «Увімкнути», a price file upload). :not(#bbp-none) outranks older button rules. */
:is(.bbp-open-contacts, .bbp-agree, .bbp-card-cta, .bbp-plan-btn, .bbp-contact-do.bbp-btn-primary,
    .page-contact .popup-button.blue, .bbp-agent-btn.is-primary, .bbp-set-actions .bbp-btn-primary, .bbp-filter-save,
    .bbp-pl-manual .bbp-btn-primary, .bbp-pl-add, .bbp-pl-tpl .bbp-btn-primary, .bbp-empty .bbp-new-request):not(#bbp-none) {
    background-color: #229ed9 !important; border-color: #229ed9 !important; color: #fff !important;
}
:is(.bbp-open-contacts, .bbp-agree, .bbp-card-cta, .bbp-plan-btn, .bbp-contact-do.bbp-btn-primary,
    .page-contact .popup-button.blue, .bbp-agent-btn.is-primary, .bbp-set-actions .bbp-btn-primary, .bbp-filter-save,
    .bbp-pl-manual .bbp-btn-primary, .bbp-pl-add, .bbp-pl-tpl .bbp-btn-primary, .bbp-empty .bbp-new-request):not(#bbp-none) * { color: #fff !important; }
:is(.bbp-open-contacts, .bbp-agree, .bbp-card-cta, .bbp-plan-btn, .bbp-contact-do.bbp-btn-primary,
    .page-contact .popup-button.blue, .bbp-agent-btn.is-primary, .bbp-set-actions .bbp-btn-primary, .bbp-filter-save,
    .bbp-pl-manual .bbp-btn-primary, .bbp-pl-add, .bbp-pl-tpl .bbp-btn-primary, .bbp-empty .bbp-new-request):not(#bbp-none) svg { fill: #fff !important; }
/* links and cards are the only things with a hover: a deeper blue */
a.bbp-plan-btn:not(#bbp-none):hover, .request.open-popup:hover .bbp-card-cta:not(#bbp-none), .bbp-empty a.bbp-new-request:not(#bbp-none):hover { background-color: #13719f !important; }

/* split view (owner 2026-10-05): from 1280 px, while a request is open the list moves left and the request opens on the
   right in place of the FAQ; with nothing open the page keeps its usual three columns (owner: «поки не відкрив — як була») */
@media (min-width: 1280px) {
    body.bbp-split .wrapper { transition: grid-template-columns .25s ease; }
    body.bbp-split #header { transition: left .25s ease; }
    body.bbp-split:has(.popup-wrapper.active > .popup-content.request.active) .wrapper { grid-template-columns: 18vw 41vw 41vw !important; }
    body.bbp-split:has(.popup-wrapper.active > .popup-content.request.active) #header { left: 41vw !important; width: auto !important; }
    body.bbp-split .popup-wrapper.active:has(.popup-content.request.active) { right: 59vw !important; left: 0 !important; width: auto !important; border-right: 1px solid var(--bbp-line); }
    body.bbp-split .popup-wrapper.active:has(.popup-content.request.active) > .close-layer { display: none !important; }
    body.bbp-split #main .request.open-popup.bbp-is-open { box-shadow: 0 0 0 2px #229ed9 !important; }
    /* the chat was laid out for the wide middle column (160px side padding): in the pane it uses the width */
    body.bbp-split .popup-wrapper .popup-content.request .request-body_inner { padding-right: 24px !important; padding-left: 24px !important; }
}

/* ---------- the list as Telegram's chat list (owner 2026-10-05): avatar, title + time, one line + badge ---------- */
#main .request.open-popup.bbp-row {
    display: flex !important; align-items: center; gap: 12px; min-height: 0 !important; margin: 0 !important; padding: 9px 12px !important;
    background: transparent !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important;
    transform: none !important; overflow: visible !important; cursor: pointer;
}
#main .request.open-popup.bbp-row + .request.open-popup.bbp-row { margin-top: 2px !important; }
#main .request.open-popup.bbp-row:hover { background: #f0f2f5 !important; }
#main .request.open-popup.bbp-row.bbp-is-open,
body.bbp-split #main .request.open-popup.bbp-row.bbp-is-open { background: #dff0fa !important; box-shadow: none !important; }
.bbp-row-av-wrap { flex: none; display: flex; }
.bbp-row-av { width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.bbp-row-av.is-cat { color: #fff; background: var(--c, #8e8e93); }
.bbp-row-av.is-cat svg { width: 24px; height: 24px; stroke: #fff; }
.bbp-row-av.is-user .bbp-av { width: 50px !important; height: 50px !important; font-size: 17px !important; margin: 0 !important; }
.bbp-row-av.is-user .bbp-av:not(.bbp-av-photo) { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 1 !important; text-align: center !important; font-weight: 600 !important; }
.bbp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bbp-row-top, .bbp-row-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bbp-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-row-time { flex: none; font: 400 12px/1.3 "Inter", system-ui, sans-serif; color: #62676c; }
.bbp-row-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/1.35 "Inter", system-ui, sans-serif; color: #5c6166; }
.bbp-row-sub .bbp-row-cat { color: #13719f; }
.bbp-row-sub .is-warn { color: #9a5212; font-weight: 600; }
.bbp-row-sub .is-muted { color: #62676c; }
.bbp-row-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px; font: 600 12px/22px "Inter", system-ui, sans-serif; text-align: center; color: #fff; background: #b8bcc0; }
.bbp-is-new .bbp-row-badge, .bbp-row-badge.is-review { background: #229ed9; }
.bbp-row-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; font: 700 13px/1 "Inter", system-ui, sans-serif; color: #62676c; }
.bbp-row-mark.is-best { color: #1a7cad; }
.bbp-row-mark.is-outbid, .bbp-row-mark.is-warn { color: #e0832b; }
.bbp-row-mark .bbp-icon { width: 16px; height: 16px; }
.bbp-row-dot { display: none; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #229ed9; }
/* the blue dot only when nothing else on the line says it */
.bbp-is-new .bbp-row-bottom:not(:has(.bbp-row-badge)) .bbp-row-dot { display: inline-block; }
/* the old card's "new" decorations do not apply to a line */
#main .request.open-popup.bbp-row::before, #main .request.open-popup.bbp-row::after { display: none !important; }
/* the scale in the buyer's chat */
.bbp-pop-journey { margin: 0 0 18px; }
@media (max-width: 991px) {
    #main .request.open-popup.bbp-row { padding: 8px 10px !important; }
    .bbp-row-av, .bbp-row-av.is-user .bbp-av { width: 48px !important; height: 48px !important; }
}

/* the seller's own offer as a third line + Telegram's ticks (owner 2026-10-05): ✓ delivered, ✓✓ (blue) the buyer saw it */
.bbp-row-third { margin-top: -1px; }
.bbp-row-offer { color: var(--bbp-ink); font-weight: 500; }
.bbp-row-ticks { flex: none; display: inline-flex; align-items: center; color: #62676c; }
.bbp-row-ticks.is-seen { color: #1a7cad; }
.bbp-row-ticks svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* chat header with a round avatar (owner 2026-10-05): ← · avatar · the category over «залишилось…» */
.request-head.has-av .bbp-head-av-row { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.request-head.has-av .bbp-head-main { flex: 1; min-width: 0; }
.request-head.has-av .bbp-head-av { flex: none; display: inline-flex; }
.request-head.has-av .bbp-head-av .bbp-row-av { width: 42px; height: 42px; }
.request-head.has-av .bbp-head-av .bbp-row-av svg { width: 21px; height: 21px; }
.request-head.has-av .bbp-head-av-row > .close-popup-all.bbp-head-back {
    position: static !important; inset: auto !important; transform: none !important; flex: none;
    display: inline-flex; align-items: center; justify-content: center; width: 34px !important; min-width: 34px !important; height: 34px !important;
    margin: 0 -8px 0 -2px; padding: 0; color: var(--bbp-ink); background: transparent !important; border: 0 !important; border-radius: 50%; cursor: pointer;
}
.request-head.has-av .bbp-head-av-row > .close-popup-all.bbp-head-back:hover { background: #f0f2f5 !important; }
.request-head.has-av .bbp-head-av-row > .close-popup-all.bbp-head-back svg { width: 22px; height: 22px; fill: none !important; stroke: currentColor !important; }
.popup-container.wide .request-head.has-av .title { margin: 0; }
.popup-container.wide .request-head.has-av .bbp-head-main > .from.from { margin: 1px 0 0 !important; }

/* desktop (owner 2026-10-05): no icon and no avatar in the chat header — the list line beside it already has them */
@media (min-width: 992px) {
    .popup-wrapper .request-head .bbp-head-av, .popup-wrapper .request-head .title .bbp-head-icon { display: none !important; }
    .popup-container.wide .request-head:not(.has-av) .from { margin-right: 36px !important; }
}

/* the list loads on as you scroll (owner 2026-10-05): a quiet spinner at the end, the link only without the script */
.bbp-more { display: flex; justify-content: center; align-items: center; min-height: 56px; padding: 8px 0 24px; }
.bbp-more-link { font: 600 14px/1 "Inter", system-ui, sans-serif; color: #13719f; }
.bbp-more-spin { display: none; width: 22px; height: 22px; border: 2.5px solid rgba(34, 158, 217, .25); border-top-color: #229ed9; border-radius: 50%; animation: bbp-spin .8s linear infinite; }
.bbp-more.is-loading .bbp-more-link { display: none; }
.bbp-more.is-loading .bbp-more-spin { display: inline-block; }
@keyframes bbp-spin { to { transform: rotate(-360deg); } }
.open-popup.bbp-proxy { display: none !important; }

/* «Не надіслано» on a line is red, as in the chat (owner 2026-10-05) */
.bbp-row-sub .is-error { color: #c0392b; font-weight: 600; }

/* rows (owner 2026-10-05): the category reads like the rest of the line; only the own offer is blue; a contact card
   carries the contacts themselves as a fourth line */
.bbp-row-sub .bbp-row-cat { color: inherit !important; font-weight: 400 !important; }
.bbp-row-third.is-mine .bbp-row-sub, .bbp-row-third.is-mine .bbp-row-offer { color: #13719f; }
.bbp-row-fourth { gap: 14px; overflow: hidden; }
.bbp-row-contact { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: none; max-width: 100%; font: 500 13.5px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-ink); text-decoration: none; }
.bbp-row-contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-row-contact .bbp-icon { flex: none; width: 14px; height: 14px; color: #62676c; }
.bbp-row-contact:hover span { text-decoration: underline; text-underline-offset: 2px; }

/* who said it, in front of the line like a sender in a Telegram group (owner 2026-10-05) */
.bbp-row-sub .bbp-row-name { color: var(--bbp-ink); font-weight: 500; }
/* the buyer's line (owner 2026-10-05): new offers blue, the total grey next to them */
.bbp-row-badge.is-fresh { background: #229ed9; }
.bbp-row-badge.is-total, .bbp-is-new .bbp-row-badge.is-total { background: #b8bcc0; }
.bbp-row-badge.is-fresh + .bbp-row-badge.is-total { margin-right: -4px; }

/* «Мій прайс» (owner 2026-10-05): the cards fold as accordions, a row is added and edited in a popup */
.bbp-acc { margin: 12px 0; }
.bbp-acc > summary { margin: 0; list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.bbp-acc > summary::-webkit-details-marker { display: none; }
.bbp-acc > summary:focus-visible { outline: 2px solid #1a7cad; outline-offset: 6px; border-radius: 10px; }
.bbp-acc[open] > summary { margin-bottom: 12px; }
.bbp-acc-meta { flex: none; max-width: 45%; font: 500 13px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-muted); text-align: left; }
.bbp-acc-chev { flex: none; display: inline-flex; color: var(--bbp-muted); transition: transform .2s ease; }
.bbp-acc[open] .bbp-acc-chev { transform: rotate(-180deg); }
.bbp-acc-body > :first-child { margin-top: 0; }
.bbp-acc-body > :last-child { margin-bottom: 0; }
.bbp-pl-add { margin: 4px 0 6px; }
.bbp-pl-auto-note { margin: -2px 30px 4px 0; font-size: 12.5px; }
.bbp-pl-table tr.bbp-pl-tr { cursor: pointer; }
.bbp-pl-edit-link { display: inline-block; margin: 4px 0 0; padding: 0; font: 600 12.5px "Inter", system-ui, sans-serif; color: #13719f; background: none; border: 0; cursor: pointer; }
.bbp-pl-edit-link:hover { text-decoration: underline; }
.bbp-pl-t-name .bbp-pl-edit-link { display: block; }
.bbp-pl-dlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; color: var(--bbp-ink); background: #fff; border: 0; border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); overflow: auto; }
.bbp-pl-dlg::backdrop { background: rgba(15, 20, 25, .45); }
html.bbp-pl-dlg-on { overflow: hidden; }
.bbp-pl-dlg-in { padding: 14px 20px 20px; }
.bbp-pl-dlg .bbp-pl-manual { margin: 0; }
.bbp-pl-dlg-head { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.bbp-pl-dlg-head h3 { margin: 0; font: 600 17px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-pl-dlg-back { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: -8px; padding: 0; color: var(--bbp-ink); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-pl-dlg .bbp-pl-ask-hint { margin: 0 0 4px; font: 500 13.5px/1.45 "Inter", system-ui, sans-serif; color: #9a5b00; }
.bbp-pl-dlg .bbp-pl-edit-row { margin-top: 6px; }
@media (max-width: 767px) {
    /* a sheet from the bottom on a phone */
    .bbp-pl-dlg { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
    .bbp-pl-dlg-in { padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); }
    .bbp-acc-meta { max-width: 38%; font-size: 12px; }
    .bbp-pl-auto-note { margin-right: 0; }
}

/* «Продовжити з Google» on its way (owner 2026-10-05): a spinner instead of the logo, no second start */
.bbp-google-btn.is-loading { cursor: progress; }
.bbp-google-btn.is-loading svg { display: none; }
.bbp-google-btn.is-loading::before { content: ""; flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2.5px solid #d6dade; border-top-color: #229ed9; border-radius: 50%; animation: bbp-spin .7s linear infinite; }
@keyframes bbp-spin { to { transform: rotate(-360deg); } }
/* a filter updates the list in place (owner 2026-10-05): the cards fade while the new ones load, a thin bar on top */
#main .center .load-more { transition: opacity .15s ease; }
#main .center.bbp-soft-loading .load-more { opacity: .45; pointer-events: none; }
.bbp-soft-bar { position: fixed; top: 0; right: 0; z-index: 10000; width: 0; height: 3px; background: #229ed9; opacity: 0; pointer-events: none; transition: width .25s ease, opacity .3s ease; }
.bbp-soft-bar.is-on { width: 70%; opacity: 1; transition: width 2.5s cubic-bezier(.1, .7, .3, 1), opacity .1s; }

/* the refuse reasons (owner 2026-10-05): one row of chips that wraps, the block-the-buyer box under it */
.popup-container.wide .tab-spam .input-group { grid-template-areas: "text text" "chip send" "block block"; }
.popup-container.wide .tab-spam .bbp-refuse-reasons { grid-area: chip; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.popup-container.wide .tab-spam .bbp-refuse-reasons label.input-radio { grid-area: auto; margin: 0; }
.popup-container.wide .tab-spam .bbp-block-buyer { grid-area: block; margin: 2px 0 0; }
/* the trash bin in a new request's header (owner 2026-10-05) */
.drop-menu.bbp-head-menu.bbp-head-trash > a svg { width: 20px; height: 20px; transform: none; fill: none !important; stroke: currentColor !important; }
.drop-menu.bbp-head-menu.bbp-head-trash.is-on > a { color: #d64545 !important; background: #fbeee9 !important; }
/* a link in BlaBlaPrice's line reads as part of the sentence */
.bbp-say-text a { font: inherit; color: #13719f; text-decoration: none; }
.bbp-say-text a:hover { text-decoration: underline; }
/* phones: the seller's main line keeps its second half, it says what the price list does (owner 2026-10-05) */
@media (max-width: 991px) {
    #main .bbp-say-list.bbp-say-progress .bbp-say-text { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; }
}
/* the answer template: greeting, the product (filled in by BlaBlaPrice), terms (owner 2026-10-05) */
.bbp-pl-tpl-lead { margin: 0; }
.bbp-pl-tpl-parts { display: grid; gap: 6px; }
.bbp-pl-tpl-cap { margin: 4px 0 0; font: 600 13px "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-pl-tpl-cap i { font-style: normal; font-weight: 500; color: var(--bbp-muted); }
.bbp-pl-tpl-item { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 10px 14px; font: 500 13.5px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-muted); background: var(--bbp-tile); border: 1px dashed #cfd6dc; border-radius: 12px; }
.bbp-pl-tpl-item b { font-weight: 600; color: var(--bbp-ink); }
.bbp-pl-tpl-item svg { flex: none; color: #1a7cad; }
.bbp-pl-preview .bbp-tpl-b:not(:empty), .bbp-pl-preview .bbp-tpl-a { padding: 0 3px; background: rgba(34, 158, 217, .12); border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ===== one chat field in every popup with photos (owner 2026-10-05): as under the list — the text, a round camera
   (38 px) and a round blue send (44 px) on the right, the photos above the text ===== */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) {
    display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 8px;
    box-sizing: border-box; width: calc(100% - 32px); max-width: 760px; margin: 8px auto 10px !important; padding: 6px 16px 6px 6px !important;
    background: #fff !important; border: 1px solid #d3cec4 !important; border-radius: 22px !important; box-shadow: 0 4px 20px rgba(31, 35, 38, .05) !important;
}
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none)::before { display: none !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none):focus-within { border-color: #229ed9 !important; box-shadow: 0 0 0 4px rgba(34, 158, 217, .14) !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded { display: contents !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded .wrap { order: -1; flex: 1 0 100%; padding: 6px 0 2px; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded .wrap:empty { display: none !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .bbp-price-chip { order: -2; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) textarea.input { order: 0; flex: 1 1 0; min-width: 0; min-height: 44px !important; margin: 0 !important; padding: 10px 0 !important; font-size: 16px !important; line-height: 1.5 !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded label.input-file {
    order: 1; flex: none; display: inline-flex !important; width: 38px !important; height: 38px !important; min-width: 38px !important;
    margin: 0 0 3px !important; padding: 0 !important; font-size: 0 !important;
    background: #f3f1ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f646a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3Z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important; border: 1px solid var(--bbp-line) !important; border-radius: 50% !important;
}
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded label.input-file::after { content: none !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded label.input-file > svg { display: none !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .popup-send, .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .popup-send.blue {
    order: 2; flex: none; display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px !important; height: 44px !important; min-width: 44px !important; margin: 0 !important; padding: 0 !important;
    background: #229ed9 !important; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(34, 158, 217, .30) !important;
}
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .popup-send { color: #fff !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .popup-send svg { width: 19px !important; height: 19px !important; margin-right: 2px; fill: none !important; stroke: currentColor !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none):not(.bbp-has-comment) .popup-send { opacity: .5; box-shadow: none !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .bbp-composer-hint, .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .bbp-photo-note { order: 3; flex: 1 0 100%; margin: 0 0 4px !important; }
@media (max-width: 640px) { .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) { width: calc(100% - 16px); } }

/* the buyer's request field in its popup: one low row, as under the list */
.bbp-popup-edit .bbp-composer:not(#bbp-none) { display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 6px 16px 6px 6px !important; border-radius: 22px !important; }
.bbp-popup-edit .bbp-composer:not(#bbp-none) .bbp-composer-opts { order: -1; flex: 1 0 100%; margin: 6px 0 0 !important; }
.bbp-popup-edit .bbp-composer:not(#bbp-none) .bbp-popup-edit-text { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; padding: 10px 0 !important; }
.bbp-popup-edit .bbp-composer:not(#bbp-none) .bbp-composer-bar { flex: none; flex-wrap: nowrap; gap: 6px; align-items: center; margin: 0 !important; }
.bbp-popup-edit .bbp-composer:not(#bbp-none) .bbp-composer-send { flex: none !important; width: auto !important; margin: 0 !important; }
.bbp-popup-edit .bbp-composer:not(#bbp-none) .bbp-composer-send button.bbp-update-btn {
    display: inline-flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; min-width: 44px !important;
    padding: 0 !important; color: #fff !important; background: #229ed9 !important; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(34, 158, 217, .30) !important;
}
.bbp-popup-edit .bbp-update-btn svg { width: 19px !important; height: 19px !important; margin-right: 2px; color: #fff !important; }
.bbp-popup-edit .bbp-update-btn.is-loading svg { display: none; }
.bbp-popup-edit .bbp-update-btn.is-loading::before { content: ""; width: 18px; height: 18px; box-sizing: border-box; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: bbp-spin .7s linear infinite; }

/* the seller's contact card (owner 2026-10-05): the client's channels and a review as small icons on the right */
.bbp-row-icons { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.bbp-row-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #fff; background: var(--c, #8e8e93); border-radius: 50%; text-decoration: none; }
.bbp-row-ic svg { width: 12px; height: 12px; }
.bbp-row-ic.is-review { width: 22px; color: #1a7cad; background: none; }
.bbp-row-ic.is-review svg { width: 20px; height: 17px; }
/* several channels: a stack of circles, each over the next, ringed in the row's colour */
#main .request.open-popup.bbp-row { --ring: #faf9f5; }
#main .request.open-popup.bbp-row:hover { --ring: #f0f2f5; }
#main .request.open-popup.bbp-row.bbp-is-open { --ring: #dff0fa; }
.bbp-row-stack { display: inline-flex; align-items: center; }
.bbp-row-stack .bbp-row-ic { position: relative; box-shadow: 0 0 0 2px var(--ring, #faf9f5); }
.bbp-row-stack .bbp-row-ic + .bbp-row-ic { margin-right: -7px; }

/* the card's icons (owner 2026-10-05): colour = not opened yet, grey = seen */
#main .request.open-popup.bbp-row:not(.bbp-is-new) .bbp-row-ic:not(.is-review) { background: #b8bcc0; }
#main .request.open-popup.bbp-row:not(.bbp-is-new) .bbp-row-ic.is-review { color: #b8bcc0; }
.bbp-row-bottom:has(.bbp-row-icons) .bbp-row-dot { display: none !important; }

/* the seller's filters as the first chip (owner 2026-10-05): the icon and how many are chosen */
.bbp-seen-chips .bbp-filter-chip { display: inline-flex; align-items: center; gap: 6px; }
.bbp-seen-chips .bbp-filter-chip svg { flex: none; width: 16px; height: 16px; fill: currentColor; }

/* «топчики» (owner 2026-10-05): lift a quiet request; the seller's row shows the arrow */
.bbp-lift-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 2px; }
.bbp-lift-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; font: 600 14.5px/1 "Inter", system-ui, sans-serif; color: #fff; background: #229ed9; border: 0; border-radius: 20px; box-shadow: 0 4px 12px rgba(34, 158, 217, .30); cursor: pointer; }
.bbp-lift-btn:active { transform: scale(.97); }
.bbp-lift-have { font: 500 13px "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-row-lift { flex: none; display: inline-flex; color: #1a7cad; }
.bbp-row-lift svg { width: 14px; height: 14px; transform: rotate(-45deg); }

/* «Поділися BlaBlaPrice» in the chat reads as a link (QA 2026-10-05) */
.bbp-share-link { color: #13719f !important; font-weight: 600; text-decoration: none; }
.bbp-share-link:hover { text-decoration: underline; }

/* QA 2026-10-05: the camera and send sit at the bottom together on a long text; a phone keeps the field low */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded label.input-file { align-self: flex-end !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .popup-send, .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .popup-send.blue { align-self: flex-end !important; }
@media (max-width: 640px) { .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) textarea.input { max-height: 132px !important; overflow-y: auto !important; } }
/* the refuse and review send buttons are round too, as in every chat field */
.popup-container.wide .tab-spam .popup-send:not(#bbp-none), .popup-container.wide .request-foot .form-wrap .popup-send:not(#bbp-none) {
    width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 50% !important;
}
/* the sticky chips: a fade drawn over the row's end instead of a mask (the mask made the row see-through, cards showed through) */
@media (min-width: 992px) {
    .bbp-seen-chips.bbp-has-more { -webkit-mask-image: none !important; mask-image: none !important; }
    .bbp-seen-chips.bbp-has-more::after { content: ""; position: sticky; left: 0; flex: none; align-self: stretch; width: 40px; margin-right: -40px; background: linear-gradient(to left, rgba(250, 249, 245, 0), #faf9f5); pointer-events: none; }
}

/* QA 2026-10-05 */
@media (min-width: 768px) { .bbp-pl-dlg { margin: auto !important; } }
@media (max-width: 991px) {
    .bbp-home.bbp-assist { padding-right: 0 !important; padding-left: 0 !important; }
    #aside-left:not(.active) { border-left-width: 0 !important; }
}

/* QA 2026-10-06 */
/* phones: the chip row's edge fades are overlays (the mask made the sticky row see-through) */
@media (max-width: 991px) {
    .bbp-seen-chips.bbp-more-right, .bbp-seen-chips.bbp-more-left, .bbp-contact-chips.bbp-more-right, .bbp-contact-chips.bbp-more-left { -webkit-mask-image: none !important; mask-image: none !important; }
    .bbp-seen-chips.bbp-more-right::after, .bbp-contact-chips.bbp-more-right::after { content: ""; position: sticky; left: -16px; z-index: 1; flex: none; align-self: stretch; width: 36px; margin-right: -36px; background: linear-gradient(to left, rgba(243, 241, 234, 0), #f3f1ea); pointer-events: none; }
    .bbp-seen-chips.bbp-more-left::before, .bbp-contact-chips.bbp-more-left::before { content: ""; position: sticky; right: -16px; z-index: 1; flex: none; align-self: stretch; width: 36px; margin-left: -36px; background: linear-gradient(to right, rgba(243, 241, 234, 0), #f3f1ea); pointer-events: none; }
}
/* long contact values wrap inside the chat instead of running out of it */
.message .inner:has(> .bbp-contact-links.is-chat) { max-width: 100% !important; min-width: 0; }
.bbp-contact-links.is-chat { min-width: 0; max-width: 100%; }
.bbp-contact-links.is-chat .bbp-contact-btn { height: auto !important; min-height: 36px; max-width: 100%; white-space: normal !important; }
.bbp-contact-links.is-chat .bbp-contact-btn span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
/* the share buttons inside the chat message; the share tab has room around it */
.bbp-share-inline { margin-top: 10px; }
.popup-container.wide .tab-share .bbp-invite { padding: 12px 16px; justify-content: center; }
.bbp-popup-error { padding: 40px 24px; text-align: center; font: 500 15px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-popup-error a { color: #13719f; }

/* the contact card's line with the contacts and the buyer's review (owner 2026-10-06) */
.bbp-row-fourth { align-items: center; gap: 10px !important; }
.bbp-row-rv { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 500 13.5px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-row-rv > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-row-rv i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e8b23a; }
.bbp-row-rv i.is-pos { background: #3a9d5d; }
.bbp-row-rv i.is-neg { background: #e0573e; }

/* the seller's answer on the contacts' line, a small bubble on the right (owner 2026-10-06) */
.bbp-row-reply { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 45%; margin-right: auto; padding: 3px 10px; font: 500 13px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #eceae4; border-radius: 12px 12px 12px 4px; }
.bbp-row-reply > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-row-reply i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e8b23a; }
.bbp-row-reply i.is-pos { background: #3a9d5d; }
.bbp-row-reply i.is-neg { background: #e0573e; }
.bbp-row-rv { flex: 0 1 auto; }

/* «Купую | Продаю» on top of the left menu, as in the phone header (owner 2026-10-06); only the chosen side's items under it */
.bbp-nav-switch { margin: 6px 0 10px; }
.bbp-nav-switch .bbp-mode { width: 100%; margin: 0; }
.bbp-nav-switch .bbp-mode-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; font-size: 14px; text-decoration: none; white-space: nowrap; }
.bbp-nav-switch .bbp-mode-btn.is-active { cursor: default; }
.bbp-nav-switch .bbp-mode-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; font: 700 11px/1 "Inter", system-ui, sans-serif; font-style: normal; color: #fff; background: #229ed9; border-radius: 9px; }
.bbp-nav-switch .bbp-mode-dot { position: static; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #229ed9; }
.bbp-nav-switched .bbp-nav-side:first-child { margin-top: 0; }
/* the switch looks like the phone header's (owner 2026-10-06); the items sit on the sidebar itself, no card under them */
.bbp-nav-switch .bbp-mode { padding: 4px; border-radius: 14px; }
.bbp-nav-switch .bbp-mode-btn { height: 40px; font: 600 14.5px/1 "Inter", system-ui, sans-serif; color: #5c6166; border-radius: 11px; }
.bbp-nav-switch .bbp-mode-btn.is-active { color: var(--bbp-ink); background: #fff; }
.bbp-nav-switched .bbp-nav-side { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* owner 2026-10-06 */
/* the chip row on a computer: ‹ › at the edges while there is more that way (a phone swipes) */
.bbp-chips-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
    .bbp-more-right > .bbp-chips-arrow.is-next, .bbp-more-left > .bbp-chips-arrow.is-prev { display: inline-flex; }
}
.bbp-seen-chips > .bbp-chips-arrow, .bbp-contact-chips > .bbp-chips-arrow {
    position: sticky; z-index: 3; flex: none !important; align-self: center; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 50%;
    box-shadow: 0 1px 4px rgba(31, 35, 38, .14); cursor: pointer;
}
.bbp-seen-chips > .bbp-chips-arrow.is-next, .bbp-contact-chips > .bbp-chips-arrow.is-next { left: 0; margin-right: -32px; }
.bbp-seen-chips > .bbp-chips-arrow.is-prev, .bbp-contact-chips > .bbp-chips-arrow.is-prev { right: 0; margin-left: -32px; }
@media (min-width: 992px) {
    .bbp-seen-chips.bbp-more-left::before { content: ""; position: sticky; right: 0; z-index: 2; flex: none; align-self: stretch; width: 40px; margin-left: -40px; background: linear-gradient(to right, rgba(250, 249, 245, 0), #faf9f5); pointer-events: none; }
}
/* fewer blue marks (owner 2026-10-06): blue means news. The half of the switch that is on does not repeat the menu's number,
   a number has no dot next to it, the invite's «+2» is a quiet pill */
.bbp-mode-btn.is-active > .bbp-mode-n, .bbp-mode-btn.is-active > .bbp-mode-dot { display: none !important; }
.count.bbp-count-total.has-new::after { content: none !important; display: none !important; }
.count.bbp-count-total.has-new { margin-left: 0 !important; }
.aside-menu .count.bbp-invite-plus { color: var(--bbp-ink) !important; background: #eceae4 !important; }
/* the price list: less green (owner 2026-10-06), only the ticks are green */
.bbp-pl-status.is-ok, .bbp-pl-t-ok { color: var(--bbp-ink); }
.bbp-pl-items small { color: var(--bbp-muted); }
.bbp-tick { font-style: normal; font-weight: 700; color: #2e8b57; }
/* the buyer's own requests have no «нове» dot (owner 2026-10-06: «це його запит»); their news are the «+N» offers */
.request.open-popup[data-rel^="user-"] .bbp-row-dot { display: none !important; }
/* the arrows take no room at all (their size and the row's 6px gap), so at the end of the row the last one goes away */
.bbp-seen-chips > .bbp-chips-arrow.is-next, .bbp-contact-chips > .bbp-chips-arrow.is-next { margin-right: -38px; }
.bbp-seen-chips > .bbp-chips-arrow.is-prev, .bbp-contact-chips > .bbp-chips-arrow.is-prev { margin-left: -38px; }
/* the edge fades take no room either (with the gap), or the row grows while it scrolls and never quite ends */
@media (min-width: 992px) {
    .bbp-seen-chips.bbp-has-more::after { margin-right: -46px !important; }
    .bbp-seen-chips.bbp-more-left::before { margin-left: -46px !important; }
}
/* «Мій AI-агент» (owner 2026-10-06): the examples as the user's messages to their AI, the steps as a short numbered list */
.bbp-agent-examples { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 4px 0 14px; padding: 0; list-style: none; }
.bbp-agent-examples li { max-width: 88%; padding: 8px 12px; font: 500 14px/1.45 "Inter", system-ui, sans-serif; color: #fff; background: #229ed9; border-radius: 16px 16px 16px 4px; }
.bbp-agent-how { margin: 0 0 10px; padding-right: 20px; font: 400 14.5px/1.6 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-agent-how li { margin: 0 0 6px; padding-right: 2px; }
.bbp-agent-how .bbp-agent-code { margin: 6px 0 0; }
.bbp-agent .bbp-acc-body .bbp-agent-step:first-child { border-top: 0; padding-top: 0; }
/* the price list rows: «Змінити» and «Видалити» side by side (owner 2026-10-06) */
.bbp-pl-row-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.bbp-pl-t-name .bbp-pl-row-acts .bbp-pl-edit-link { display: inline-block; margin: 0; }
.bbp-pl-edit-link.is-del { color: #b4443a; }
/* the popups' preloader: the BlaBlaPrice mark breathing over a light veil, no blur (owner 2026-10-06: «прелоадер як лого») */
.preloader:before {
    background: rgba(250, 249, 245, .55) url('/blabla/img/mark.svg?v=1') no-repeat center !important;
    background-size: 44px 44px !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    animation: bbp-mark-breathe 1.1s ease-in-out infinite;
}
.list-files-uploaded.preloader:before { background-size: 26px 26px !important; animation: none; }
@keyframes bbp-mark-breathe { 0%, 100% { background-size: 40px 40px; } 50% { background-size: 48px 48px; } }
@media (prefers-reduced-motion: reduce) { .preloader:before { animation: none; } }
/* the left menu's switch: a bag for «Купую», a price tag for «Продаю» (owner 2026-10-06) */
.bbp-nav-switch .bbp-mode-btn .bbp-icon { flex: none; width: 17px; height: 17px; }
/* the bubbles on the right get the tail of the clouds in our logo (owner 2026-10-06): the right edge runs straight down
   into a point and a curve brings it back to the bottom, the logo's tail mirrored; the bubble's own colour (inherit) */
.request-body .text-right .message .inner { border-bottom-left-radius: 0 !important; }
.request-body .text-right .message .inner::after,
.bbp-row-reply::after, .bbp-agent-examples li::after {
    content: ""; display: block; position: absolute; top: 100%; left: 0; width: 12px; height: 8px; background: inherit; pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0A11 11 0 0 1 10 6V0Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0A11 11 0 0 1 10 6V0Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.request-body .text-right .message .inner .date { margin-top: 10px; }
.bbp-row-reply { position: relative; overflow: visible; border-bottom-left-radius: 0 !important; }
.bbp-row-reply::after { width: 8px; height: 5px; }
.bbp-row-bottom.bbp-row-fourth { padding-bottom: 5px; }
.bbp-agent-examples { gap: 12px; }
.bbp-agent-examples li { position: relative; border-bottom-left-radius: 0 !important; }
.bbp-agent-examples li::after { width: 10px; height: 7px; }
.bbp-contact .text-right .message .inner::after { display: none !important; }
/* the preloader moves (owner 2026-10-06: «рухомим і цікавим»): the logo's two clouds pop in one after the other like
   messages and blink (an animated SVG, img/loader.svg) */
.preloader:before { background-image: url('/blabla/img/loader.svg?v=2') !important; background-size: 52px 52px !important; animation: none !important; }
.list-files-uploaded.preloader:before { background-size: 28px 28px !important; }
/* the tails as big as the logo's (it hangs about a fifth of the bubble's height) */
.request-body .text-right .message .inner::after { width: 18px; height: 11px; }
.bbp-agent-examples li::after { width: 14px; height: 9px; }
.bbp-row-reply::after { width: 11px; height: 7px; }
.bbp-row-bottom.bbp-row-fourth { padding-bottom: 7px; }
.request-body .text-right .message .inner .date { margin-top: 13px; }
/* the popup's skeleton while it loads (owner 2026-10-06): the card's avatar and title, BlaBlaPrice's moving logo and a
   blinking «Завантажую…» on the popup's own background — no veil */
.popup-content.request.bbp-skel-on:before { display: none !important; }
.bbp-skel { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 22px; padding: 14px 20px; background: #faf9f5; }
.bbp-skel-head { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--bbp-line); }
.bbp-skel-av { flex: none; display: flex; width: 44px; height: 44px; }
.bbp-skel-av > * { flex: none; width: 44px !important; height: 44px !important; min-width: 0 !important; margin: 0 !important; border-radius: 50%; overflow: hidden; }
.bbp-skel-h { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bbp-skel-h b { overflow: hidden; font: 600 16px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); white-space: nowrap; text-overflow: ellipsis; }
.bbp-skel-h span { overflow: hidden; font: 400 13.5px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-muted); white-space: nowrap; text-overflow: ellipsis; }
.bbp-skel-say { display: flex; align-items: flex-start; gap: 12px; }
.bbp-skel-logo { flex: none; width: 40px; height: 40px; }
.bbp-skel-say b { display: block; margin: 1px 0 4px; font: 700 13px/1.2 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-skel-text { font: 500 15px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-muted); animation: bbp-blink 2s ease-in-out infinite; }
@keyframes bbp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .bbp-skel-text { animation: none; } }
/* BlaBlaPrice's tip about the own AI and the prices (owner 2026-10-06) */
.bbp-ai-tip { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font: 500 14px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-ai-tip-ic { flex: none; }
.bbp-ai-tip a { font-weight: 600; color: #13719f; white-space: nowrap; text-decoration: none; }
.bbp-ai-tip a:hover { text-decoration: underline; }
.bbp-filter-intro .bbp-ai-tip { margin-top: 6px; }
.blabla-comment .bbp-ai-tip { margin: 8px 0 0; }
.blabla-comment.bbp-tip-msg .bbp-ai-tip { margin: 0; }
/* the corner under the tail is square (a .inner.inner rule rounded it) */
.request-body .text-right .message .inner.inner.inner { border-bottom-left-radius: 0 !important; }
/* ---------- QA round 3 (2026-10-06) ---------- */
/* the «Відкликати пропозицію» icon had no size and grew to 300x150 */
.bbp-menu-extend svg { flex: none; width: 20px; height: 20px; fill: currentColor; }
/* /cabinet/invite: the page container is not the share-buttons row (.bbp-invite is flex there) */
.center.bbp-agent.bbp-invite { display: block; gap: 0; margin-top: 0; }
/* «Популярні питання»: the chevron keeps its size on two-line questions */
#aside-right .btn-accordeon svg, .faq .btn-accordeon svg { flex: none; margin-right: 10px; }
/* the chip row below 992 px: the edge fades take no room either (with the 6px gap), so the row ends */
@media (max-width: 991px) {
    .bbp-seen-chips.bbp-more-right::after, .bbp-contact-chips.bbp-more-right::after { margin-right: -42px !important; }
    .bbp-seen-chips.bbp-more-left::before, .bbp-contact-chips.bbp-more-left::before { margin-left: -42px !important; }
}
/* the AI page examples: one tail for the group, as in Telegram */
.bbp-agent-examples { gap: 6px; }
.bbp-agent-examples li:not(:last-child) { border-bottom-left-radius: 6px !important; }
.bbp-agent-examples li:not(:last-child)::after { display: none; }
/* new request at 992-1150 px: the FAQ under the form is not hidden behind the docked field */
@media (min-width: 992px) and (max-width: 1150px) { .wrap-aside.h-991 { padding-bottom: 330px; } }
/* touch: the chips are easier to hit */
@media (pointer: coarse) { .bbp-contact-chip { height: 36px !important; } a.bbp-more-link { display: inline-block; padding: 10px 4px; } }
/* the three columns from 1151 px: the side columns at least 240 px (the menu switch fits) and at most 320 / 360 px (wide
   screens do not stretch the menu); the fixed parts that followed 18vw follow the same widths */
@media (min-width: 1151px) {
    :root { --bbp-col-l: clamp(240px, 18vw, 320px); --bbp-col-r: clamp(240px, 18vw, 360px); }
    .wrapper { grid-template-columns: var(--bbp-col-l) minmax(0, 1fr) var(--bbp-col-r); }
    .popup-wrapper, .pagination-wrapper { right: var(--bbp-col-l); left: var(--bbp-col-r); }
    .request-head #header { right: var(--bbp-col-l); left: var(--bbp-col-r); width: auto; }
    .popup-container.wide .request-body:before { right: var(--bbp-col-l); left: var(--bbp-col-r); }
}
@media (min-width: 1280px) {
    body.bbp-split:has(.popup-wrapper.active > .popup-content.request.active) .wrapper { grid-template-columns: var(--bbp-col-l) minmax(0, 1fr) minmax(0, 1fr) !important; }
    body.bbp-split:has(.popup-wrapper.active > .popup-content.request.active) #header { left: calc((100vw - var(--bbp-col-l)) / 2) !important; }
    body.bbp-split .popup-wrapper.active:has(.popup-content.request.active) { right: calc((100vw + var(--bbp-col-l)) / 2) !important; }
}
/* «Оцінюю запит…»: the moving logo stands for the category until Claude settles it (owner 2026-10-06) */
.bbp-row-av.is-eval { display: inline-flex; align-items: center; justify-content: center; background: transparent !important; }
.bbp-row-av.is-eval img { display: block; width: 100%; height: 100%; }
/* the request's quality line and a failed step of the live analysis (owner 2026-10-06) */
.bbp-check-msg .bbp-req-quality { margin: 10px 0 6px; }
.bbp-steps li.is-fail::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 "Inter", sans-serif; color: #fff; background: #d0781f; border: 0; animation: none; }
/* QA round 3, phones (2026-10-06) */
/* «Змінити | Видалити» on the price rows: real tap targets, «Видалити» further from «Змінити» */
.bbp-pl-row-acts { gap: 0 24px; margin-top: 0; }
.bbp-pl-t-name .bbp-pl-row-acts .bbp-pl-edit-link { padding: 8px 0; }
@media (pointer: coarse) { .bbp-pl-t-name .bbp-pl-row-acts .bbp-pl-edit-link { min-height: 36px; } }
/* the row popup: «Видалити» on the far side from «Зберегти» */
.bbp-pl-dlg .bbp-pl-edit-row { justify-content: space-between; }
.bbp-pl-dlg .bbp-pl-remove { padding: 10px 4px; }
/* the price list checkboxes keep their size when the label wraps */
.bbp-pl-auto input { flex: none; }
/* the AI page: the setup steps are numbered */
.bbp-agent-how, .bbp-agent-how li { list-style: decimal; }
.bbp-agent-how li { display: list-item; }
/* the grey offer count reads better */
.bbp-row-badge.is-total, .bbp-is-new .bbp-row-badge.is-total { background: #8d949a; }
/* the «ділова пропозиція» (owner 2026-10-06): a small game card — three топчики light up when the buyer shares */
.bbp-deal { margin: 12px 0 4px; padding: 14px 14px 12px; background: linear-gradient(-135deg, #fff8e6, #eef7fd); border: 1px solid #f1e2b8; border-radius: 16px; }
.bbp-deal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bbp-deal-title { margin: 0; font: 700 16px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-deal-coins { display: inline-flex; flex: none; }
.bbp-deal-coins i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: -8px; color: #fff; background: #c9cdd2;
    border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(31, 35, 38, .15); transition: background .3s, transform .3s; }
.bbp-deal-coins i:first-child { margin-right: 0; }
.bbp-deal.is-gifted .bbp-deal-coins i { background: linear-gradient(-135deg, #ffd25a, #f5a623); }
.bbp-deal.is-new-gift .bbp-deal-coins i { animation: bbp-coin-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 140ms); }
@keyframes bbp-coin-pop { 0% { transform: scale(.4) rotate(30deg); } 70% { transform: scale(1.25) rotate(-8deg); } 100% { transform: none; } }
.bbp-deal-text { margin: 8px 0 0; font: 400 14.5px/1.55 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-deal-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; padding: 0; list-style: none; }
.bbp-deal-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; font: 600 12.5px/1.2 "Inter", system-ui, sans-serif; color: #5c6166; background: rgba(255, 255, 255, .7); border-radius: 999px; }
.bbp-deal-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 11px; color: #fff; background: #b8bcc0; border-radius: 50%; }
.bbp-deal-steps li.is-on { color: var(--bbp-ink); }
.bbp-deal-steps li.is-on span { background: #229ed9; }
.bbp-deal-steps li.is-done span { background: #23914a; font-size: 0; }
.bbp-deal-steps li.is-done span::before { content: "✓"; font-size: 11px; }
.bbp-deal-pinned { margin: 0 0 8px; font: 600 13.5px/1.45 "Inter", system-ui, sans-serif; color: #13719f; }
.bbp-deal .bbp-invite { margin-top: 4px; }
.bbp-deal-bonus { margin: 10px 0 0; font: 500 12.5px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
/* QA round 3, laptops (2026-10-06) */
/* the search row in the header never pushes «Знайти» out (split view at 1280-1440): the fields shrink instead */
.request-head #header .bbp-list-filter { flex-wrap: nowrap; }
.request-head #header .bbp-list-filter .bbp-list-search { flex: 1 1 auto; min-width: 0; }
.request-head #header .bbp-list-filter .bbp-list-cat { flex: 0 1 190px; min-width: 0; }
.request-head #header .bbp-list-filter .bbp-list-cat select { width: 100%; min-width: 0; }
.request-head #header .bbp-list-filter .bbp-list-go { flex: none; }
/* the menu switch fits its column with a counter on either half */
.bbp-nav-switch .bbp-mode { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bbp-nav-switch .bbp-mode-btn { min-width: 0; padding: 0 6px; gap: 5px; overflow: hidden; }
@media (max-width: 1499px) { .bbp-nav-switch .bbp-mode-btn { font-size: 13.5px; } .bbp-nav-switch .bbp-mode-btn .bbp-icon { width: 15px; height: 15px; } }
/* the bubble's tail does not touch the time under it */
.request-body .text-right .message .inner .date { margin-top: 17px; }
/* the quality scale filled up to its % (owner 2026-10-06): each bar fills from the bottom */
.bbp-clarity-meter.is-pct i { background: linear-gradient(to top, var(--lvl) calc(var(--f, 0) * 100%), var(--bar-off) calc(var(--f, 0) * 100%)); }
/* QA round 3, phones (2026-10-06): the skeleton's way back (phones only), the contact circles on a touch card open the card */
.bbp-skel-back { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 -8px 0 -4px; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; }
@media (max-width: 991px) { .bbp-skel-back { display: inline-flex; } }
@media (pointer: coarse) { .bbp-row-fourth .bbp-row-ic, .bbp-row-icons .bbp-row-ic { pointer-events: none; } }
/* «Тримати в топі» in the deal card (owner 2026-10-06) */
.bbp-deal-keep { margin: 4px 0 10px; }
.bbp-deal-lift { margin: 0; }
.bbp-deal-keep-btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 16px; font: 700 14px/1 "Inter", system-ui, sans-serif; color: #fff;
    background: linear-gradient(-135deg, #f5a623, #f08a24); border: 0; border-radius: 20px; box-shadow: 0 2px 8px rgba(240, 138, 36, .35); cursor: pointer; }
.bbp-deal-keep-btn span { font-weight: 500; opacity: .9; }
.bbp-deal-rules { margin: 10px 0 0; padding: 10px 12px; font: 400 14px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: rgba(255, 255, 255, .75); border-radius: 12px; animation: bbp-row-in .3s ease both; }
.bbp-deal-rules p { margin: 0 0 6px; }
.bbp-deal-rules ul { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 4px; }
.bbp-deal-rules-note { margin: 0 !important; font-size: 13px; color: var(--bbp-muted); }
/* «Закріпити в топі» (owner 2026-10-06): one button; the rules and the link open under it when there are no топчики */
.bbp-keep { margin: 12px 0 4px; }
.bbp-keep-btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; font: 700 14.5px/1 "Inter", system-ui, sans-serif; color: #fff;
    background: linear-gradient(-135deg, #f5a623, #f08a24); border: 0; border-radius: 21px; box-shadow: 0 2px 8px rgba(240, 138, 36, .35); cursor: pointer; }
.bbp-keep-btn:disabled { opacity: .6; cursor: default; }
.bbp-keep-on { margin: 0; padding: 10px 14px; font: 600 14px/1.45 "Inter", system-ui, sans-serif; color: #8a5a00; background: #fff4dc; border-radius: 14px; }
.bbp-keep-on.is-new { animation: bbp-row-in .35s ease both; }
.bbp-keep-rules { margin: 10px 0 0; padding: 12px 14px; font: 400 14.5px/1.55 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff8e6; border: 1px solid #f1e2b8; border-radius: 14px; animation: bbp-row-in .3s ease both; }
.bbp-keep-rules p { margin: 0 0 8px; }
.bbp-keep-gift { font-weight: 600; }
.bbp-keep-why { color: #b4443a; font-weight: 600; }
.bbp-keep-rules .bbp-invite { margin-top: 4px; }
/* the request popup as an assistant (owner 2026-10-06): short messages, then tips — each a calm tile with one soft action */
.popup-container.wide .bbp-assist { margin-top: 34px; }
.popup-container.wide .bbp-assist > .blabla-comment { margin-top: 0; }
.popup-container.wide .bbp-assist > .blabla-comment + .blabla-comment { margin-top: 16px; }
.popup-container.wide .bbp-assist > .blabla-comment .text { display: block; max-width: 600px; padding: 0; background: transparent !important; font-size: 14.5px; line-height: 1.5; }
.popup-container.wide .bbp-assist .bbp-done { margin-top: 4px; }
.popup-container.wide .bbp-assist .bbp-check-hint { margin: 8px 0 0; color: var(--bbp-muted); }
.bbp-tips { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.bbp-tip { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; background: #f3f1ea; border-radius: 14px; list-style: none; }
.bbp-tip-ic { flex: none; font-size: 18px; line-height: 1.35; }
.bbp-tip-body { flex: 1; min-width: 0; }
.bbp-tip-body p { margin: 0 0 8px; }
.bbp-tip-body p:last-child { margin-bottom: 0; }
.bbp-soft-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; font: 600 13.5px/1 "Inter", system-ui, sans-serif; color: #13719f; text-decoration: none; background: #dce7f3a6; border: 0; border-radius: 17px; cursor: pointer; }
.bbp-soft-btn:disabled { opacity: .6; cursor: default; }
.bbp-tip .bbp-keep-on { margin: 0; padding: 0; font: 600 14px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: none; border-radius: 0; }
.bbp-tip .bbp-keep-rules { margin: 10px 0 0; padding: 0; background: none; border: 0; border-radius: 0; }
.bbp-tip .bbp-invite-btn { background: #fff; }
/* the card menu on a long press / right click (owner 2026-10-06): a bottom sheet on phones, a popover on computers */
#main .request.open-popup.bbp-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.bbp-cm { position: fixed; inset: 0; z-index: 10050; }
.bbp-cm-layer { position: absolute; inset: 0; background: rgba(15, 20, 25, .35); animation: bbp-cm-fade .15s ease both; }
.bbp-cm-box { position: absolute; right: 8px; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 8px; background: #fff; border-radius: 18px; box-shadow: 0 10px 40px rgba(15, 20, 25, .25); animation: bbp-cm-up .2s ease both; }
.bbp-cm-box.is-pop { left: auto; bottom: auto; width: 260px; animation: bbp-cm-fade .12s ease both; }
.bbp-cm-title { margin: 4px 10px 6px; overflow: hidden; font: 700 13px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-muted); white-space: nowrap; text-overflow: ellipsis; }
.bbp-cm-box ul { margin: 0; padding: 0; list-style: none; }
.bbp-cm-box li { margin: 0; list-style: none; }
.bbp-cm-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; font: 500 15px/1.2 "Inter", system-ui, sans-serif; color: var(--bbp-ink); text-align: right; background: none; border: 0; border-radius: 12px; cursor: pointer; }
.bbp-cm-item span { flex: none; width: 22px; font-size: 17px; text-align: center; }
.bbp-cm-item:focus-visible { outline: 2px solid #1a7cad; outline-offset: -2px; }
.bbp-cm-box.is-pop .bbp-cm-item { min-height: 40px; font-size: 14px; }
.bbp-cm-item.is-danger { color: #d0453a; }
.bbp-cm-note { margin: 6px 10px 4px; font: 500 13.5px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
@keyframes bbp-cm-up { from { transform: translateY(24px); opacity: 0; } }
@keyframes bbp-cm-fade { from { opacity: 0; } }
@media (hover: hover) { .bbp-cm-item:hover { background: #f0f2f5; } }
/* the assistant's messages are one group: the logo and the name only at the first */
.popup-container.wide .bbp-assist > .blabla-comment.not-first::before, .popup-container.wide .bbp-assist > .blabla-comment.not-first .text::before { visibility: hidden !important; }
/* the own AI tip stands out among the tips; the home pitch (owner 2026-10-06) */
.bbp-tip.is-ai { background: #e9f5fc; box-shadow: inset 0 0 0 1px #bfe3f6; }
.bbp-soft-btn.is-accent { color: #fff; background: #229ed9; }
.bbp-chat-pitch { margin: 6px 0 10px; font: 500 15px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
/* «Видалити акаунт» (owner 2026-10-06): quiet until opened, red only for the final button */
.bbp-set-delete .bbp-del-open { color: #c0392b; }
.bbp-del-form { display: grid; gap: 10px; margin-top: 4px; }
.bbp-btn-danger { justify-self: start; height: 42px; padding: 0 18px; font: 700 14px/1 "Inter", system-ui, sans-serif; color: #fff; background: #d0453a; border: 0; border-radius: 12px; cursor: pointer; }
.bbp-btn-danger:disabled { opacity: .45; cursor: default; }
/* light theme: the active menu item is white on the sidebar (owner 2026-10-07) */
html:not([data-theme="dark"]) #aside-left .bbp-nav a.link.active,
html:not([data-theme="dark"]) #aside-left .bbp-nav .bbp-nav-side .bbp-nav-sub a.link.active { background: #fff !important; box-shadow: 0 1px 3px rgba(31, 35, 38, .08) !important; }
/* «Створити мій прайс» under BlaBlaPrice's «Твій хід» (owner 2026-10-07) */
.bbp-your-move .text p + p { margin-top: 8px; }
.bbp-your-move .bbp-soft-btn { margin-top: 2px; }
/* the request popup in the light theme (owner 2026-10-07): white, the stage bars in the bubble's colour, the bubble as far
   from the stages as the stages are from the header */
html:not([data-theme="dark"]) .popup-container.wide,
html:not([data-theme="dark"]) .popup-container.wide .request-body,
html:not([data-theme="dark"]) .popup-content.request .request-head { background-color: #fff !important; }
html:not([data-theme="dark"]) .bbp-skel { background: #fff; }
html:not([data-theme="dark"]) .popup-container.wide .bbp-journey li::before { background: linear-gradient(-90deg, var(--bar) 0 var(--fill, 0%), #edece9 var(--fill, 0%) 100%) !important; }
.popup-container.wide .request-body .bbp-journey { margin-bottom: 58px; }
/* «Купую | Продаю» by the owner's sample (2026-10-07): no filled track — a thin outline with air inside; the chosen half is outlined too */
.bbp-mode, .bbp-nav-switch .bbp-mode { gap: 6px; padding: 6px; background: transparent; border: 1px solid #dfdbd2; border-radius: 16px; box-shadow: none; }
.bbp-mode-btn.is-active, .bbp-nav-switch .bbp-mode-btn.is-active { background: #fff; box-shadow: 0 0 0 1px #dfdbd2; }
.bbp-nav-switch .bbp-mode-btn { height: 40px; }
@media (max-width: 991px) {
    .bbp-headswitch .bbp-mode { gap: 5px; padding: 5px; border-radius: 14px; }
    .bbp-headswitch .bbp-mode-btn { height: 34px; border-radius: 10px; }
}
.bbp-nav-switch .bbp-mode-btn { min-height: 0; }
/* the popup's edit field (owner 2026-10-07, by his sketch): «Оновити» is a Telegram-style blue text button, no round fill;
   the field takes the colour next to it — in the white popup a soft cream */
.bbp-popup-edit .bbp-composer:not(#bbp-none) .bbp-composer-send button.bbp-update-btn {
    position: relative; width: auto !important; min-width: 0 !important; height: 44px !important; padding: 0 12px !important;
    font: 700 13.5px/1 "Inter", system-ui, sans-serif !important; letter-spacing: .04em; text-transform: uppercase;
    color: #13719f !important; background: transparent !important; border-radius: 12px !important; box-shadow: none !important;
}
.bbp-popup-edit .bbp-composer:not(#bbp-none) .bbp-composer-send button.bbp-update-btn.is-loading { color: transparent !important; }
.bbp-popup-edit .bbp-update-btn.is-loading::before { position: absolute; top: 50%; right: 50%; margin: -9px -9px 0 0; border-color: rgba(34, 158, 217, .3); border-top-color: #229ed9; }
html:not([data-theme="dark"]) .popup-container.wide .bbp-popup-edit .bbp-composer:not(#bbp-none) { background: #f5f4f0 !important; }
/* the AI / price-list tip's icon is the menu item's tile (owner 2026-10-07: «поміняй цю іконку», was 💡) */
.bbp-ai-tip-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #fff; background: var(--c, #9c6ce6); border-radius: 7px; }
.bbp-ai-tip-ic .bbp-icon { width: 14px; height: 14px; stroke-width: 2; }
/* «Мій AI-агент» (owner 2026-10-07: «вирівняй тексти і дизайн»): the intro is one BlaBlaPrice message, and the cards
   stand exactly under it — the same 640px column as the message, like the cards of the requests list */
.bbp-say-more { margin-top: 8px !important; }
.bbp-say-note { margin: 8px 0 0; font: 400 14px/1.55 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-agent .bbp-agent-card { box-sizing: border-box; max-width: 640px; margin-right: auto; margin-left: auto; }
@media (max-width: 991px) { .bbp-agent .bbp-agent-card { margin-right: 14px; margin-left: 14px; } }

/* ===== every chat field (owner 2026-10-07, by his sketch): asleep it is ONE row — the camera on the left, one line of
   text, the send / «Оновити» on the right; a click wakes it (is-open, js/bbp-cards.js): the text takes the whole width
   and grows as you type, the camera and the button go under it. A longer text fades out at the end of its first line. ===== */
:is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) { display: flex !important; flex-wrap: wrap !important; align-items: flex-end; gap: 0 8px !important; padding: 6px !important; }
:is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) .bbp-composer-bar { display: contents !important; }
:is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) .bbp-composer-opts { order: -2 !important; flex: 1 0 100% !important; }
:is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) .bbp-req-photo { order: -1 !important; flex: none; margin: 0 0 3px !important; }
:is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) textarea { order: 0 !important; flex: 1 1 0 !important; width: auto !important; min-width: 0; min-height: 0 !important; padding: 10px 2px !important; }
:is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) .bbp-composer-send { order: 2 !important; flex: none !important; width: auto !important; margin: 0 !important; }
:is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) .bbp-home-note { order: 3 !important; flex: 1 0 100% !important; }
.bbp-popup-edit .bbp-composer:not(#bbp-none) .bbp-composer-send button.bbp-update-btn { height: 40px !important; margin-bottom: 2px !important; }
:is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer.is-open:not(#bbp-none) textarea { order: -1 !important; flex: 1 0 100% !important; padding: 8px 10px 6px !important; }
:is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer.is-open:not(#bbp-none) .bbp-req-photo { order: 1 !important; margin-left: auto !important; }
/* the seller's offer field: the same, its photos stay a row above */
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) { gap: 0 8px !important; padding: 6px !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .bbp-price-chip { order: -3 !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded .wrap { order: -2 !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded label.input-file { order: -1 !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) textarea.input { order: 0 !important; padding: 10px 2px !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment.is-open:not(#bbp-none) textarea.input { order: -1 !important; flex: 1 0 100% !important; padding: 8px 10px 6px !important; }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment.is-open:not(#bbp-none) .list-files-uploaded label.input-file { order: 1 !important; margin-left: auto !important; }
/* asleep: one line */
:is(.bbp-composer, .tab-answer .input-group):not(.is-open) textarea { max-height: 44px !important; max-height: calc(1lh + 20px) !important; overflow-y: hidden !important; }
:is(.bbp-composer, .tab-answer .input-group).is-long:not(.is-open) textarea {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
/* asleep the second line must not peek through the field's bottom padding; the seller's field has its own stronger height rules */
:is(.bbp-composer, .tab-answer .input-group):not(.is-open) textarea { clip-path: inset(0 0 8px 0); }
.popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none):not(.is-open) textarea.input { max-height: 44px !important; max-height: calc(1lh + 20px) !important; overflow-y: hidden !important; }
/* the offer's match to the request (owner 2026-10-07): a quiet pill, green only for a full match; what differs beside it */
.bbp-offer-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.bbp-offer-match { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; font: 700 12px/1 "Inter", system-ui, sans-serif; color: #5f646a; background: #f1efe9; border-radius: 11px; white-space: nowrap; }
.bbp-offer-match.is-full { color: #1e7b3a; background: #e3f4e8; }
.bbp-offer-match.is-low { color: #a35a12; background: #fbefe1; }
.bbp-offer-why { font: 500 12.5px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
/* «Мій прайс»: the match the seller answers from */
.bbp-pl-match { display: grid; gap: 8px; margin: 14px 0 6px; }
.bbp-pl-match label { font: 600 14.5px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-pl-match label b { color: #13719f; }
.bbp-pl-match input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 8px 0 2px; background: linear-gradient(-90deg, #229ed9 0 var(--fill, 50%), #e6e3dc var(--fill, 50%) 100%); border-radius: 3px; outline: none; }
.bbp-pl-match input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: #fff; border: 2px solid #229ed9; border-radius: 50%; box-shadow: 0 1px 4px rgba(31, 35, 38, .2); cursor: pointer; }
.bbp-pl-match input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: #fff; border: 2px solid #229ed9; border-radius: 50%; cursor: pointer; }
.bbp-pl-match-scale { display: flex; justify-content: space-between; font: 500 12px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-pl-match p { margin: 2px 0 0; }
/* phones: the match of an offer stands right under its text, above the button */
/* the footer is a reversed column there: the highest order comes first */
@media (max-width: 575px) { .bbp-offer-foot > .bbp-offer-tags { order: 9; } }
/* how we understood the request (owner 2026-10-07): quiet, the fix hint quieter */
.bbp-done li.bbp-intent .bbp-intent-fix { color: var(--bbp-muted); font-weight: 400; }
.bbp-offers-note.bbp-intent-note { line-height: 1.45; }
/* BlaBlaPrice thinks aloud (owner 2026-10-07): the animated logo of the preloader and one blinking line, a stage every 3 s */
.blabla-comment.bbp-think::before, .blabla-comment.bbp-think:before { background-image: url("/blabla/img/loader.svg?v=2") !important; background-size: 36px 36px !important; background-color: transparent !important; }
.blabla-comment.bbp-think.is-failed::before, .blabla-comment.bbp-think.is-failed:before { background-image: url("/blabla/img/icon-logo.png?v=3") !important; }
.bbp-think-line { margin: 6px 0 0 !important; }
.bbp-think-text { font: 500 15px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-muted); animation: bbp-blink 2s ease-in-out infinite; }
.bbp-think-text.is-error { color: #c0392b; animation: none; }
@media (prefers-reduced-motion: reduce) { .bbp-think-text { animation: none; } }
/* the popup of a new request is its preloader (owner 2026-10-07): in the place of the request popup, the request and BlaBlaPrice thinking */
.bbp-prepop { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 2000; display: flex; flex-direction: column; background: #fff; box-shadow: 1px 0 0 var(--bbp-line); }
.bbp-prepop-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--bbp-line); }
.bbp-prepop-av { flex: none; display: flex; width: 44px; height: 44px; }
.bbp-prepop-av img { width: 44px; height: 44px; }
.bbp-prepop-h { display: grid; gap: 2px; min-width: 0; }
.bbp-prepop-h b { font: 600 17px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); animation: bbp-blink 2s ease-in-out infinite; }
.bbp-prepop-h span { font: 500 13px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-prepop-body { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 22px; padding: 28px 24px; }
.bbp-prepop-bubble { align-self: flex-end; max-width: 78%; padding: 10px 16px; font: 400 15px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); white-space: pre-wrap; overflow-wrap: anywhere; background: #edece9; border-radius: 18px 18px 18px 0; }
.bbp-prepop-say { display: grid; gap: 2px; padding-right: 48px; }
.bbp-prepop-name { font: 600 12px/1.4 "Inter", system-ui, sans-serif; letter-spacing: .02em; color: #62676c; }
.bbp-prepop .blabla-comment.bbp-think { position: relative; display: block; margin: 0; padding: 0; background: none; border: 0; }
.bbp-prepop .blabla-comment.bbp-think::before { content: ""; position: absolute; right: -48px; top: -18px; width: 36px; height: 36px; background: url("/blabla/img/loader.svg?v=2") center / 36px 36px no-repeat !important; }
.bbp-prepop .blabla-comment.bbp-think .bbp-think-line { margin: 0 !important; }
@media (prefers-reduced-motion: reduce) { .bbp-prepop-h b { animation: none; } }
/* the real popup's header blinks while BlaBlaPrice still thinks (the live analysis of a new request) */
.bbp-head-text.is-thinking { animation: bbp-blink 2s ease-in-out infinite; }
.bbp-prepop .blabla-comment.bbp-think .text { margin: 0 !important; padding: 0 !important; }
.bbp-prepop .blabla-comment.bbp-think .text::before { display: none !important; }
/* «Що зроблено» / «Що роблю далі» in the request message (owner 2026-10-07) */
.popup-container.wide .bbp-check-msg .text p.bbp-check-lead.bbp-done-lead { margin: 10px 0 8px; }
.popup-container.wide .bbp-check-msg .bbp-next-think { margin-top: 14px; }
.bbp-help-msg .bbp-soft-btn { margin-top: 10px; }
.bbp-help-msg .bbp-invite-native { display: none !important; }
/* the preloader of a new request opens where the request will: the list moves left at once (owner 2026-10-07) */
@media (min-width: 1280px) {
    body.bbp-split:has(.bbp-prepop) .wrapper { grid-template-columns: var(--bbp-col-l) minmax(0, 1fr) minmax(0, 1fr) !important; }
    body.bbp-split:has(.bbp-prepop) #header { left: calc((100vw - var(--bbp-col-l)) / 2) !important; width: auto !important; }
}
/* the preloader of a new request opens where the request will: the list moves left at once (owner 2026-10-07) */
@media (min-width: 1280px) {
    body.bbp-split:has(.bbp-prepop) .wrapper { grid-template-columns: var(--bbp-col-l) minmax(0, 1fr) minmax(0, 1fr) !important; }
    body.bbp-split:has(.bbp-prepop) #header { left: calc((100vw - var(--bbp-col-l)) / 2) !important; width: auto !important; }
}
/* the preloader put back after the reload fades once the real popup is under it (owner 2026-10-07) */
.bbp-prepop.is-leaving { opacity: 0; transition: opacity .15s ease; pointer-events: none; }
/* the preloader stands exactly like the request's popup (owner 2026-10-07): phone, then the wide screen */
.bbp-prepop-head { position: relative; height: 50px; padding: 0; box-sizing: border-box; background: #fff; border-bottom: 1px solid #ebe8e3; }
.bbp-prepop-back { position: absolute; right: 4px; top: 8px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--bbp-ink); }
.bbp-prepop-av { position: absolute; right: 46px; top: 1px; width: 48px; height: 48px; }
.bbp-prepop-av img { width: 48px; height: 48px; }
.bbp-prepop-h { position: absolute; right: 104px; left: 12px; top: 5px; display: block; }
.bbp-prepop-h b { display: block; font: 600 16.5px/21.45px "Inter", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbp-prepop-h span { display: block; margin-top: 1px; font: 500 12.5px/17.5px "Inter", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbp-prepop-body { display: block; padding: 38px 18px 24px; gap: 0; }
.bbp-prepop .bbp-prepop-journey { margin: 0 0 58px; }
html:not([data-theme="dark"]) .bbp-prepop .bbp-journey li::before { background: linear-gradient(-90deg, var(--bar) 0 var(--fill, 0%), #edece9 var(--fill, 0%) 100%) !important; }
.bbp-prepop-bubble { display: table; margin: 0 auto 0 0; max-width: min(82%, 345px); box-sizing: border-box; padding: 10px 16px; font: 400 15px/1.5 "Inter", system-ui, sans-serif; border-radius: 16px 16px 16px 0; }
.bbp-prepop-meta { margin: 16px 0 0 4px; text-align: left; font: 500 11.5px/18px "Inter", system-ui, sans-serif; color: #62676c; }
.bbp-prepop-meta b { font-weight: 600; color: var(--bbp-accent); }
.bbp-prepop-say { display: block; position: relative; margin: 21px 0 0; padding: 4px 53px 0 0; min-height: 48px; box-sizing: border-box; }
.bbp-prepop-name { display: block; font: 600 12px/17px "Inter", system-ui, sans-serif; }
.bbp-prepop .bbp-prepop-say .blabla-comment.bbp-think { position: static; margin-top: 5px; }
.bbp-prepop .bbp-prepop-say .blabla-comment.bbp-think::before { right: 0; top: 0; }
@media (min-width: 992px) {
    .bbp-prepop-head { height: 64px; }
    .bbp-prepop-back { right: 22px; top: 15px; }
    .bbp-prepop-av { display: none; }
    .bbp-prepop-h { right: 64px; top: 10px; }
    .bbp-prepop-h b { font-size: 18px; line-height: 23.4px; }
    .bbp-prepop-h span { margin-top: 2px; font-size: 13px; line-height: 18.2px; }
    .bbp-prepop-body { padding: 59px 40px 24px; }
    .bbp-prepop-meta { margin-top: 17px; font-weight: 400; }
    .bbp-prepop-say { margin-top: 22px; }
}
.bbp-prepop-dots { position: absolute; left: 12px; top: 5px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; box-sizing: border-box; color: var(--bbp-ink); border: 1px solid #ebe8e3; border-radius: 50%; }
.bbp-prepop-h { left: 60px; }
@media (min-width: 992px) { .bbp-prepop-dots { left: 22px; top: 12px; } .bbp-prepop-h { left: 72px; } }
/* a category not settled yet: a plain grey circle in the head (owner 2026-10-07) */
.bbp-row-av.is-nocat { background: #d3d6da; }
.bbp-prepop-av { display: flex; align-items: center; justify-content: center; }
.bbp-prepop-av .bbp-row-av { width: 42px; height: 42px; }
@media (min-width: 992px) { .bbp-prepop-av { display: none; } }
/* BlaBlaPrice's line in the preloader: the very sizes of the popup's (label 12/16.8, then the line 16/24.8 six px under) */
.bbp-prepop .bbp-prepop-say { padding-top: 0; }
.bbp-prepop .bbp-prepop-name { font: 600 12px/16.8px "Inter", system-ui, sans-serif; letter-spacing: .24px; margin: 0 0 2px; color: #62676c; }
.bbp-prepop .bbp-prepop-say .blabla-comment.bbp-think { margin-top: 0; }
.bbp-prepop .bbp-prepop-say .blabla-comment.bbp-think .bbp-think-line { margin: 6px 0 0 !important; font-size: 16px; line-height: 24.8px !important; }
/* the preloader's bubble has the popup's tail too */
.bbp-prepop-bubble { position: relative; }
.bbp-prepop-bubble::after {
    content: ""; display: block; position: absolute; top: 100%; left: 0; width: 18px; height: 11px; background: inherit; pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0A11 11 0 0 1 10 6V0Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0A11 11 0 0 1 10 6V0Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
/* a step done while the popup is open comes in softly */
.bbp-done li.is-new { animation: bbp-li-in .45s ease both; }
@keyframes bbp-li-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bbp-done li.is-new { animation: none; } }
/* the category avatars in muted colours (owner 2026-10-07: «менш яркими, придушені кольори, щоб увага була на кнопці
   створення запиту»): the colour mixed with a warm grey, the icon stays white */
.bbp-row-av.is-cat, .bbp-row-ic { background: color-mix(in oklab, var(--c, #8e8e93) 40%, #c9c4bb); }
/* «шукаю ще продавців» stands at the very bottom now, after the advice (owner 2026-10-07) */
.popup-container.wide .bbp-check-msg .bbp-next-think { margin-top: 24px; }
/* the message's headings stand out from its lines (owner 2026-10-07: «оцінкам дай заголовок і порадам заголовок») */
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-check-title { font-size: 17.5px !important; font-weight: 600 !important; line-height: 1.4 !important; }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-check-title.bbp-sec-title { margin: 0 0 6px; }
/* the request's step on the scale at the top in muted colours too, like the avatars (owner 2026-10-07) */
.bbp-journey li.tone-bad { --bar: color-mix(in oklab, #e0573e 55%, #c9c4bb); }
.bbp-journey li.tone-ok { --bar: color-mix(in oklab, #e8b23a 55%, #c9c4bb); }
.bbp-journey li.tone-good { --bar: color-mix(in oklab, #3a9d5d 55%, #c9c4bb); }

/* ---------- the left menu as a rail of icons while a request is open on the right (owner 2026-10-07: «лівий сайдбар
   стискається до вертикальної полоски з іконками, і переключалка продавець/покупець — іконки»), Telegram's folder rail ---------- */
@media (min-width: 1280px) {
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) { --bbp-col-l: 0px; }
    /* the account menu opens beside the rail */
}

/* ---------- a narrow list beside the open request, as in Telegram (owner 2026-10-07: «список карточок ще звузь як у
   телеграмі, карточку на всю ширину звуженої області, і меню активне на всю ширину»): rail | list | request ---------- */
@media (min-width: 1280px) {
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) { --bbp-col-list: clamp(320px, 26vw, 420px); }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .wrapper { grid-template-columns: var(--bbp-col-l) var(--bbp-col-list) minmax(0, 1fr) !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header { left: calc(100vw - var(--bbp-col-l) - var(--bbp-col-list)) !important; width: auto !important; }
    body.bbp-split .popup-wrapper.active:has(.popup-content.request.active) { right: calc(var(--bbp-col-l) + var(--bbp-col-list)) !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #main .center { max-width: none !important; margin-right: 0 !important; margin-left: 0 !important; padding-right: 0 !important; padding-left: 0 !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #main .center > :not(.user-order):not(.seller-order):not(.bbp-list-dock) { margin-right: 14px !important; margin-left: 14px !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #main .request.open-popup.bbp-row { border-radius: 0 !important; padding-right: 14px !important; padding-left: 14px !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #main .request.open-popup.bbp-row + .request.open-popup.bbp-row { margin-top: 0 !important; }
    /* the rail: the open section is lit across the whole rail */
}

@media (min-width: 1280px) {
    /* the narrow list keeps only the search field on top (Enter searches), as in Telegram */
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header .bbp-list-filter-head .bbp-list-cat,
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header .bbp-list-filter-head button[type="submit"] { display: none !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header .bbp-list-filter-head .bbp-list-search { flex: 1 1 auto !important; }
    /* the list's request field stays inside its column */
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-list-dock.is-fixed { box-sizing: border-box !important; padding-right: 10px !important; padding-left: 10px !important; }
    /* the wide request: its chat in one centred column (the head stays across), like Telegram's wide chats */
    body.bbp-split .popup-wrapper.active .popup-content.request .request-body_inner { max-width: 880px !important; margin-right: auto !important; margin-left: auto !important; box-sizing: border-box !important; }
    body.bbp-split .popup-wrapper.active .popup-content.request .request-body_inner .bbp-check-msg { max-width: none !important; margin-right: 0 !important; margin-left: 0 !important; }
    body.bbp-split .popup-wrapper.active .popup-content.request .bbp-req-dock { margin-right: auto !important; margin-left: auto !important; }
    /* the preloader keeps the same column (popup: 16 px + an 880 px box with 24 px inside; here 40 px inside) */
    /* the popup's chat column is 812 px wide, as its field below (its inner box 860 with 24 px inside, owner 2026-10-09: «розшир
       і вирівняй»): the preloader's 892 with 40 px inside */
    .bbp-prepop .bbp-prepop-body { width: 100%; max-width: 892px; margin-right: auto; margin-left: auto; box-sizing: border-box; }
    /* the request field under the chat column, centred like it */
    body.bbp-split .popup-wrapper.active .popup-content.request .bbp-req-dock.is-fixed { max-width: min(860px, 100vw - var(--bbp-col-l) - var(--bbp-col-list)) !important; right: calc(var(--bbp-col-l) + var(--bbp-col-list) + (100vw - var(--bbp-col-l) - var(--bbp-col-list) - min(860px, 100vw - var(--bbp-col-l) - var(--bbp-col-list))) / 2) !important; }
}

/* ---------- the rail and the narrow list, part 2 (owner 2026-10-07: «у звуженому вікні списку все як на телефоні — зверху
   купую/продаю і т.д.; у звуженому сайдбарі іконка розширити — сайдбар розширюється і показує меню; при наведенні на
   іконку юзера знизу — меню як на телефоні») ---------- */
@media (min-width: 1280px) {
    /* the list's head as on a phone: «Купую | Продаю» and 🎁 on top, the search under them */
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header { height: auto !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header .head-main { flex-wrap: wrap !important; align-content: flex-start !important; row-gap: 8px !important; height: auto !important; box-sizing: border-box !important; padding: 8px 12px !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header .head-main > .bbp-headswitch { display: flex !important; flex: 1 1 auto !important; align-items: center; gap: 8px; min-width: 0; margin: 0 !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-headswitch .bbp-mode { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1 1 auto; width: auto !important; max-width: none !important; margin: 0 !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-headswitch .bbp-mode-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 36px; font-size: 14px; text-decoration: none; white-space: nowrap; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-headswitch .bbp-mode-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; font: 700 11px/1 "Inter", system-ui, sans-serif; font-style: normal; color: #fff; background: #229ed9; border-radius: 9px; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-head-gift { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; color: #3d4247; border-radius: 50%; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-head-gift.is-on { color: #13719f; background: #e2f2fa; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-head-gift svg { fill: none !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header .head-main > form.bbp-list-filter-head { display: none !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-seen-chips, body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-contact-chips { top: 64px !important; }

    /* the folded rail: no switch (it is on the list's head now), ☰ under the logo */
    /* the account menu shows on hover, beside the rail */
    /* ☰ pressed: the whole menu over the list */
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)).bbp-rail-open #aside-left { width: 320px !important; z-index: 1600 !important; box-shadow: -12px 0 32px rgba(31, 35, 38, .16) !important; }
}
/* ---------- light: the list white, the request on the list's warm colour (owner 2026-10-07: «у світлій темі список
   карточок зроби білим, а попап — як зараз список»), as in Telegram: white chats, the chat on its own background ---------- */
@media (min-width: 992px) {
html:not([data-theme="dark"]) body.bbp-split #main,
html:not([data-theme="dark"]) body.bbp-split #header,
html:not([data-theme="dark"]) body.bbp-split .bbp-seen-chips,
html:not([data-theme="dark"]) body.bbp-split .bbp-contact-chips { background-color: #fff !important; }
html:not([data-theme="dark"]) body.bbp-split .bbp-list-dock { background-image: linear-gradient(rgba(255, 255, 255, 0), #fff 22px) !important; }
html:not([data-theme="dark"]) body.bbp-split .bbp-seen-chips.bbp-has-more::after { background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff) !important; }
/* the fields follow what is around them: grey on the white list, white on the warm request */
html:not([data-theme="dark"]) body.bbp-split .bbp-list-dock .bbp-composer { background-color: #f5f4f0 !important; }
html:not([data-theme="dark"]) body.bbp-split :is(.bbp-seen-chips, .bbp-contact-chips) { box-shadow: 12px 0 0 #fff, -12px 0 0 #fff !important; }
html:not([data-theme="dark"]) body.bbp-split :is(.bbp-seen-chips, .bbp-contact-chips).bbp-more-right::after { background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff) !important; }
html:not([data-theme="dark"]) body.bbp-split :is(.bbp-seen-chips, .bbp-contact-chips).bbp-more-left::before { background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff) !important; }
}
/* (a phone: the list on its cream #faf9f5 as before, owner 2026-10-09: «на телефоні кремовий фон як був замість білого») */
html:not([data-theme="dark"]) .popup-content.request .popup-container.wide,
html:not([data-theme="dark"]) .popup-content.request .request-head,
html:not([data-theme="dark"]) .popup-content.request .request-body,
html:not([data-theme="dark"]) .popup-content.request .tab-answer { background-color: #faf9f5 !important; }
html:not([data-theme="dark"]) .popup-content.request .bbp-req-dock .bbp-composer { background-color: #fff !important; }
html:not([data-theme="dark"]) .bbp-prepop, html:not([data-theme="dark"]) .bbp-prepop-head { background-color: #faf9f5 !important; }
/* the request's field white on its warm background; the list's chips row without the old warm side bands */
html:not([data-theme="dark"]) .popup-content.request .popup-container.wide .bbp-popup-edit .bbp-composer:not(#bbp-none) { background: #fff !important; }

/* ---------- 🔍 in the head instead of 🎁 (owner 2026-10-08: «замість іконки подарунка постав іконку пошуку, яка після
   натискання стає замість переключалки купую/продаю»): the field takes the switch's place, × or Esc brings it back.
   js/bbp-cards.js builds it where the list has a search; it searches with the list's own form ---------- */
.bbp-head-q, .bbp-head-search { display: none; }
.bbp-headswitch.has-search .bbp-head-gift { display: none !important; }
.bbp-headswitch.has-search .bbp-head-search { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; color: #3d4247; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-headswitch.has-search .bbp-head-search svg { width: 20px; height: 20px; }
.bbp-headswitch.is-searching .bbp-mode, .bbp-headswitch.is-searching .bbp-head-search { display: none !important; }
.bbp-headswitch.is-searching .bbp-head-q { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px 0 6px; box-sizing: border-box; background: #f3f1ea; border-radius: 20px; }
.bbp-head-q svg { flex: none; width: 16px; height: 16px; color: #62676c; }
.bbp-head-q input { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0; font: 400 15px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: transparent !important; border: 0 !important; outline: none; box-shadow: none !important; }
.bbp-head-q-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; font: 400 20px/1 system-ui, sans-serif; color: #62676c; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
/* on a phone the field above the cards keeps only the category: the search is in the head */
@media (max-width: 991px) {
    body:has(.bbp-headswitch.has-search) .bbp-list-filter:not(.bbp-list-filter-head) .bbp-list-search { display: none !important; }
}
.bbp-head-q input::-webkit-search-cancel-button, .bbp-head-q input::-webkit-search-decoration { display: none; -webkit-appearance: none; appearance: none; }

/* ---------- no rail: the list's head is a phone's — ☰ · «Купую | Продаю» · 🔍; ☰ slides the whole menu in over the list
   (owner 2026-10-08: «зроби взагалі без лівої вертикальної полоски, постав меню як на телефоні») ---------- */
@media (min-width: 1280px) {
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)):not(.bbp-rail-open) #aside-left { width: 0 !important; min-width: 0 !important; overflow: hidden !important; visibility: hidden !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header .head-main { flex-wrap: nowrap !important; gap: 4px !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header .head-main > .btn-aside { display: flex !important; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 12px !important; cursor: pointer; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header .head-main > .btn-aside span { display: block !important; width: 18px !important; height: 2px !important; margin: 0 !important; background: var(--bbp-ink) !important; border-radius: 1px; position: static !important; transform: none !important; }
    /* ☰ pressed: the menu over the list, the rest dimmed */
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)).bbp-rail-open #aside-left { width: 320px !important; visibility: visible !important; overflow: visible !important; z-index: 1600 !important; box-shadow: -12px 0 32px rgba(31, 35, 38, .16) !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)).bbp-rail-open::before { content: ""; position: fixed; inset: 0; z-index: 1550; background: rgba(15, 20, 25, .28); }
}
/* searching beside an open request: the field takes the switch's place there too (the split head's rules are stronger) */
body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-headswitch.is-searching .bbp-mode, body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-headswitch.is-searching .bbp-head-search { display: none !important; }

/* ---------- QA round 2026-10-08: testers' findings ---------- */
@media (min-width: 1280px) {
    /* the narrow list is rows only (the intro and the notifications ask are for the wide page): at 1366x768 cards were not seen */
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #main .center > .request.request-main { height: 64px !important; min-height: 0 !important; margin: 0 0 6px !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #main :is(.bbp-say-list, .bbp-notify-ask) { display: none !important; }
    /* the list's head as tall as the request's (64 px), with the same line under it */
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header { height: 64px !important; box-sizing: border-box !important; border-bottom: 1px solid var(--bbp-line) !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header .head-main { height: 63px !important; padding-top: 0 !important; padding-bottom: 0 !important; align-items: center !important; }
    /* the list's request field inside its column (it ran 14 px under the request) */
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-list-dock.is-fixed { right: var(--bbp-col-l) !important; width: var(--bbp-col-list) !important; max-width: none !important; padding-right: 12px !important; padding-left: 12px !important; box-sizing: border-box !important; }
    /* ☰'s menu as wide as the list it covers, a calmer scrim */
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)).bbp-rail-open #aside-left { width: var(--bbp-col-list) !important; }
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)).bbp-rail-open::before { background: rgba(31, 35, 38, .22) !important; }
    /* the seller's offer field under the chat column too */
    /* the seller's offer field as wide as the chat column above it (812 px, as the buyer's field; owner 2026-10-09) */
    body.bbp-split .popup-wrapper.active .popup-content.request .tab-answer .input-group.bbp-steps { max-width: 812px !important; margin-right: auto !important; margin-left: auto !important; }
    /* the loading head looks like the real one: no avatar, the title where it will be */
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .popup-content.request .bbp-skel-av { display: none !important; }
}
/* the selected «Купую | Продаю» shows on a white head (white on white before) */
html:not([data-theme="dark"]) #header .bbp-headswitch .bbp-mode { background: #f3f1ea !important; border-color: transparent !important; }
html:not([data-theme="dark"]) #header .bbp-headswitch .bbp-mode-btn.is-active { background: #fff !important; box-shadow: 0 1px 3px rgba(31, 35, 38, .14) !important; }
/* hovers only on links (owner's rule): the switch and the account button stay still */
.bbp-mode-btn:not(.is-active):hover { background: transparent !important; }
#aside-left .foot > .link-btn:hover { background-color: transparent !important; }
/* the account name never runs into the arrow */
#aside-left .foot > .link-btn { padding-left: 40px !important; }
#aside-left .foot > .link-btn > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* secondary actions are not black: blue is for creating a request */
html:not([data-theme="dark"]) :is(.bbp-notify-yes, .bbp-list-go) { color: var(--bbp-ink) !important; background: #ece9e2 !important; }
html:not([data-theme="dark"]) :is(.bbp-notify-yes, .bbp-list-go):hover { background: #ece9e2 !important; }
/* buyers' avatars in the seller list as quiet as the categories */
#main .request.open-popup .bbp-row-av .bbp-av { filter: saturate(.55) brightness(1.04); }
/* settings: the cards keep their gaps (a script between two cards broke «+»), one button shape */
.bbp-set-card.bbp-confetti-card, .bbp-set-card.bbp-set-delete { margin-top: 16px !important; }
.bbp-set-card :is(.bbp-btn-primary, .bbp-btn-light) { height: 44px; border-radius: 12px !important; }
/* a folded field shows one line, not the top of the second */
:is(.bbp-composer, .tab-answer .input-group):not(.is-open) textarea { min-height: 0 !important; }
/* a popup that could not load says so on its own background, with a way out */
.popup-content .bbp-popup-error { min-height: 100%; box-sizing: border-box; background: var(--bbp-bg, #faf9f5); }
@media (min-width: 1280px) { body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .wrapper, body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #header { transition: none !important; } }
@media (min-width: 1280px) { body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-list-dock.is-fixed .bbp-composer { margin-right: 0 !important; margin-left: 0 !important; } }
@media (min-width: 992px) { .bbp-prepop-bubble { max-width: min(82%, 500px); } }
@media (min-width: 1280px) { body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) .bbp-list-dock.is-fixed { margin-right: 0 !important; margin-left: 0 !important; } }
/* ---------- found on the web (owner 2026-10-08) ---------- */
.bbp-web-list { display: grid; gap: 10px; margin: 6px 0 10px; padding: 0; list-style: none; }
.bbp-web-item { margin: 0; padding: 12px 14px; list-style: none; background: #fff; border: 1px solid var(--bbp-line); border-radius: 14px; }
.bbp-web-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.popup-container.wide .bbp-check-msg .text a.bbp-web-name { font-weight: 600; color: var(--bbp-ink); text-decoration: none; }
.popup-container.wide .bbp-check-msg .text a.bbp-web-name:hover { text-decoration: underline; }
.bbp-web-match { flex: none; font: 600 12.5px/1.4 "Inter", system-ui, sans-serif; color: #13719f; }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-web-price { margin: 2px 0 0; font-weight: 600; font-size: 15px !important; }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-web-why { margin: 4px 0 0; font-size: 14px !important; line-height: 1.45 !important; color: var(--bbp-muted); }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-web-meta { margin: 6px 0 0; font-size: 12.5px !important; line-height: 1.4 !important; color: var(--bbp-muted); }
.bbp-web-meta a { color: #13719f; text-decoration: none; }
.bbp-web-msg.is-new { animation: bbp-li-in .5s ease both; }
.popup-container.wide .bbp-check-msg .text a.bbp-web-call { margin-top: 10px; text-decoration: none; }
.bbp-web-msg { margin-top: 18px; }
/* «зрозумів так» put in when the reading comes (owner 2026-10-08) */
.bbp-done li.bbp-intent.is-new { animation: bbp-li-in .5s ease both; }
/* ---------- the work log of a request (owner 2026-10-08: «показуємо процес роботи і відразу результат») ---------- */
.bbp-work [data-vis="hidden"] { display: none !important; }
.bbp-work .bbp-worksteps-msg:not(:has(li:not([data-vis="hidden"]):not([data-silent]))) { display: none !important; }
.bbp-worksteps li[data-vis="work"] .bbp-step-d, .bbp-worksteps li[data-vis="done"] .bbp-step-w { display: none; }
.bbp-done.bbp-worksteps li[data-vis="work"]::before { content: ""; width: 16px; height: 16px; box-sizing: border-box; background: transparent; border: 2px solid #b4def2; border-top-color: var(--bbp-accent); border-radius: 50%; animation: bbp-spin .9s linear infinite; transform: none; }
.bbp-worksteps li[data-vis="work"] .bbp-step-w { color: var(--bbp-muted); font-weight: 500; animation: bbp-blink 2s ease-in-out infinite; }
.bbp-worksteps .bbp-step-r { color: var(--bbp-muted); }
.bbp-work .is-new { animation: bbp-li-in .45s ease both; }
.popup-container.wide .bbp-check-msg .text p.bbp-hello-say { margin: 0; }
.popup-container.wide .bbp-check-msg .text p.bbp-hello-hint { margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) {
    .bbp-done.bbp-worksteps li[data-vis="work"]::before, .bbp-worksteps li[data-vis="work"] .bbp-step-w, .bbp-work .is-new { animation: none; }
}
/* a found business's rating said as trust (owner 2026-10-08) */
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-web-trust { margin: 6px 0 0; font-size: 13.5px !important; line-height: 1.4 !important; font-weight: 600; color: #23914a; }
/* ---------- prices on the web, the cheapest first (owner 2026-10-08) ---------- */
.bbp-price-list { display: grid; gap: 8px; margin: 6px 0 10px; padding: 0; list-style: none; }
.bbp-price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0; padding: 10px 12px; list-style: none; background: #fff; border: 1px solid var(--bbp-line); border-radius: 12px; }
.bbp-price-info { flex: 1 1 200px; min-width: 0; }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-price-top { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px !important; line-height: 1.4 !important; }
.bbp-price-sum { font: 700 16px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-price-shop { font: 500 13px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-price-what { margin: 2px 0 0; font-size: 13px !important; line-height: 1.4 !important; color: var(--bbp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-price-go { flex: none; }
.bbp-price-go.is-site { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-price-row.is-new { animation: bbp-li-in .4s ease both; }
/* ---------- «Збільшимо шанси на пропозиції»: the cheap model's questions (owner 2026-10-08) ---------- */
.bbp-ask-list { display: grid; gap: 14px; margin: 8px 0 12px; padding: 0; list-style: none; }
.bbp-ask-q { margin: 0; list-style: none; }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-ask-title { margin: 0 0 8px; font-weight: 600; font-size: 15px !important; line-height: 1.4 !important; }
.bbp-ask-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.bbp-ask-opt { padding: 7px 12px; font: 500 13.5px/1.2 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 999px; cursor: pointer; }
.bbp-ask-opt.is-skip, .bbp-ask-opt.is-own { color: var(--bbp-muted); }
.bbp-ask-opt[aria-pressed="true"] { color: #fff; background: #229ed9; border-color: #229ed9; }
.bbp-ask-own { display: block; width: 100%; max-width: 360px; margin: 8px 0 0; padding: 8px 12px; font: 400 14px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 10px; box-sizing: border-box; }
.bbp-ask-preview { margin: 4px 0 10px; padding: 10px 12px; background: rgba(34, 158, 217, .08); border-radius: 12px; }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-ask-pl { margin: 0 0 4px; font-size: 13px !important; color: var(--bbp-muted); }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-ask-text { margin: 0; font-weight: 500; font-size: 15px !important; line-height: 1.45 !important; }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-ask-error { margin: 0 0 8px; color: #c0392b; font-size: 13.5px !important; }
.bbp-ask-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bbp-ask-again { padding: 0; font: 500 14px/1.3 "Inter", system-ui, sans-serif; color: #13719f; background: none; border: 0; cursor: pointer; }
.bbp-ask.is-new { animation: bbp-li-in .4s ease both; }
/* ---------- a found business's phone: an icon, the number with «скажи, що бачиш ціну на BlaBlaPrice» (owner 2026-10-08) ---------- */
.bbp-call-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 40px; height: 40px; padding: 0; color: #1a7cad; background: rgba(34, 158, 217, .1); border: 0; border-radius: 50%; cursor: pointer; }
.bbp-call-btn.bbp-web-call { width: auto; height: 36px; margin-top: 8px; padding: 0 12px 0 14px; border-radius: 999px; font: 600 14px/1 "Inter", system-ui, sans-serif; }
.bbp-call-pop { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 20, 25, .45); }
.bbp-call-card { position: relative; width: 100%; max-width: 360px; padding: 22px 20px 18px; background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); animation: bbp-li-in .2s ease both; }
.bbp-call-x { position: absolute; top: 8px; left: 10px; width: 34px; height: 34px; font-size: 24px; line-height: 1; color: #6b7680; background: none; border: 0; cursor: pointer; }
.bbp-call-name { margin: 0 0 8px 28px; font: 700 17px/1.35 "Inter", system-ui, sans-serif; color: #1f2326; }
.bbp-call-say { margin: 0 0 14px; font: 400 14.5px/1.5 "Inter", system-ui, sans-serif; color: #4a545c; }
.bbp-call-num { display: block; margin: 0 0 14px; font: 700 22px/1.3 "Inter", system-ui, sans-serif; color: #1f2326; text-decoration: none; }
.bbp-call-go { display: block; padding: 13px 16px; text-align: center; font: 700 15px/1.2 "Inter", system-ui, sans-serif; color: #fff; background: #229ed9; border-radius: 12px; text-decoration: none; }

/* ---------- the light theme's text readable (WCAG AA 4.5:1, owner 2026-10-08): the base theme's grey of the menu's account line ---------- */
html:not([data-theme="dark"]) #aside-left .link-btn { color: #5c6166; }

/* ---------- an offer's price on the card's right, by one, the sum for the quantity under it: the cards compared at a glance
   (owner 2026-10-09: «зроби тексти і шрифти, щоб було зручно швидко порівнювати картки»); «Топ-3» went to the tags ---------- */
.bbp-offer-price { margin: 0; gap: 2px; text-align: left; }
.bbp-offer-price .bbp-offer-sum { font: 700 19px/1.2 "Inter", system-ui, sans-serif; color: var(--bbp-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.bbp-offer-price .bbp-offer-sum small { margin-right: 1px; font: 600 13px/1 "Inter", system-ui, sans-serif; color: #5c6166; }
.bbp-offer-price .bbp-offer-sum small.bbp-offer-sum-from { margin: 0; }
.bbp-offer-sum-note { font: 500 12.5px/1.3 "Inter", system-ui, sans-serif; color: #5c6166; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bbp-offer-who b { font-weight: 700; }
.bbp-offer-text-body { font-size: 15px; }
.bbp-offer-date, .bbp-offer-price s { color: #62676c; }
.bbp-offer-date { font-size: 12px; }
@media (max-width: 575px) {
    /* a phone: the price on its own line under the name, at the same place on every card, the name keeps its width */
    .bbp-offer-top { grid-template-columns: 38px minmax(0, 1fr) !important; row-gap: 8px; }
    .bbp-offer-top .bbp-offer-price { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; text-align: right; }
    .bbp-offer-top .bbp-offer-price:empty { display: none; }
    .bbp-offer-sum-note { white-space: normal; }
}

/* the work log's analysis step is not shown (owner 2026-10-09: «це не потрібно»); it stays in the page for the player */
.bbp-worksteps > li[data-silent] { display: none !important; }

/* ---------- the work log's steps: the names; what came of each in an accordion (owner 2026-10-09: «детальніше про крок в
   акордеоні»); no hover, as everywhere but on links ---------- */
.bbp-step-acc { min-width: 0; }
.bbp-step-acc > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
.bbp-step-acc > summary::-webkit-details-marker { display: none; }
.bbp-step-acc > summary:focus-visible { outline: 2px solid var(--bbp-accent); outline-offset: 2px; border-radius: 4px; }
.bbp-step-chev { flex: none; color: var(--bbp-muted); transition: transform .2s; }
.bbp-step-acc[open] .bbp-step-chev { transform: rotate(-180deg); }
.bbp-step-acc > .bbp-step-r { margin: 4px 0 2px; font-size: 14px; line-height: 1.45; }
.bbp-web-intro { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .bbp-step-chev { transition: none; } }

/* ---------- the list's chips: their side bands wider than the 14px gap beside them, so the open card does not peek out at the
   sides when it scrolls under (owner 2026-10-09); the list clips what goes past it ---------- */
.bbp-seen-chips, .bbp-contact-chips { box-shadow: 20px 0 0 #faf9f5, -20px 0 0 #faf9f5 !important; }
@media (min-width: 992px) {
    html:not([data-theme="dark"]) body.bbp-split :is(.bbp-seen-chips, .bbp-contact-chips) { box-shadow: 20px 0 0 #fff, -20px 0 0 #fff !important; }
}

/* ---------- a request on a computer: the chat as wide as its field below and aligned with it (owner 2026-10-09: «розшир і
   вирівняй як я показав»); BlaBlaPrice's messages across the whole column, the web's finds two in a row ---------- */
@media (min-width: 1280px) {
    body.bbp-split .popup-wrapper.active .popup-content.request .request-body_inner { width: 100% !important; max-width: 860px !important; }
}
@media (min-width: 992px) {
    .popup-content.request .request-body_inner .blabla-comment { max-width: 100% !important; }
    .popup-content.request .request-body_inner .blabla-comment .text { max-width: none !important; }
    .popup-content.request .request-body_inner .bbp-web-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
}

/* the list's search bar kept in the page for the header's 🔍 under 10 cards (2026-10-09) */
.bbp-list-filter[hidden] { display: none !important; }

/* a price of a similar thing (another colour): marked (owner 2026-10-09) */
.bbp-price-similar { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font: 500 12.5px/1.3 "Inter", system-ui, sans-serif; color: #9a5212; }
.bbp-price-similar span { padding: 1px 7px; font-weight: 700; color: #9a5212; background: #fbefe1; border-radius: 9px; }
/* a long product name in the prices: cut with «…» inside the row, the row never wider than the screen (2026-10-09, 390 px) */
.bbp-price-list { grid-template-columns: minmax(0, 1fr); }
.bbp-price-row, .bbp-price-info { min-width: 0; }
/* «Схоже» in one piece; the line as small as the product's name (the chat's own paragraph size is bigger) */
.bbp-check-msg .bbp-price-similar { flex-wrap: wrap; font-size: 12.5px !important; line-height: 1.35 !important; }
.bbp-price-similar span { flex: none; white-space: nowrap; }
/* (the chat's «.request-body_inner .blabla-comment .text p { 16px !important }» is stronger than a class: this one is more) */
.popup-container.wide .request-body_inner .blabla-comment .text p.bbp-price-similar, .bbp-price-row p.bbp-price-similar { font: 500 12.5px/1.35 "Inter", system-ui, sans-serif !important; }
.popup-container.wide .request-body_inner .blabla-comment .text p.bbp-price-similar span, .bbp-price-row p.bbp-price-similar span { font: 700 12px/1.35 "Inter", system-ui, sans-serif !important; }

/* a request that went to sellers: its questions wait for the buyer to go to the field below (owner 2026-10-09) */
.bbp-work:not([data-asked]) .bbp-ask-msg[data-on-edit] { display: none !important; }

/* ---------- the questions over the request's field (owner 2026-10-09 mockup): a panel, the answers go straight into the field ---------- */
.bbp-popup-edit:not(.is-fixed) { position: relative; }
.bbp-ask-pop { position: fixed; z-index: 1001; box-sizing: border-box; overflow: auto; padding: 14px 16px 12px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 18px; box-shadow: 0 -10px 30px rgba(31, 35, 38, .14); animation: bbp-li-in .18s ease both; }
.bbp-ask-pop-x { position: absolute; top: 6px; left: 6px; width: 34px; height: 34px; padding: 0; font-size: 24px; line-height: 1; color: var(--bbp-muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-ask-pop .bbp-ask-q:first-child .bbp-ask-title { padding-left: 34px; }
.bbp-ask-pop .bbp-ask-list { margin: 0 0 10px; }
.bbp-ask-pop p.bbp-ask-title { margin: 0 0 8px; font: 600 14.5px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-ask-pop .bbp-ask-opts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .bbp-ask-pop { animation: none; } }
/* the request's field above the chat it is pinned over (the chat's messages are z-index 2 as well and came over it, 2026-10-09) */
.popup-container.wide .bbp-popup-edit.bbp-req-dock { z-index: 20 !important; }

/* the field while the questions' panel is on: as when typed in; lit for a moment when an answer lands in it (owner 2026-10-09) */
.bbp-req-dock .bbp-composer.is-asking { border-color: #229ed9 !important; box-shadow: 0 0 0 4px rgba(34, 158, 217, .14), 0 10px 30px rgba(31, 35, 38, .10) !important; }
.bbp-req-dock .bbp-composer.is-flash { animation: bbp-ask-flash .9s ease-out; }
@keyframes bbp-ask-flash { 0% { box-shadow: 0 0 0 4px rgba(34, 158, 217, .14); } 35% { box-shadow: 0 0 0 8px rgba(34, 158, 217, .32); } 100% { box-shadow: 0 0 0 4px rgba(34, 158, 217, .14); } }
/* the answer on its way into the field */
.bbp-ask-fly { position: fixed; z-index: 1002; padding: 7px 12px; font: 600 13.5px/1.2 "Inter", system-ui, sans-serif; color: #fff; white-space: nowrap; background: #229ed9; border-radius: 999px; box-shadow: 0 6px 18px rgba(34, 158, 217, .35); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bbp-req-dock .bbp-composer.is-flash { animation: none; } }
.bbp-ask-pop-wait { margin: 6px 0 8px 40px; font: 500 14px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-muted); animation: bbp-blink 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bbp-ask-pop-wait { animation: none; } }
/* the list beside an open request: a thin quiet scrollbar (Windows drew a 17 px band beside the open card, owner 2026-10-09) */
body.bbp-split #main { scrollbar-width: thin; scrollbar-color: rgba(31, 35, 38, .22) transparent; }

/* ---------- the web's prices and businesses as one list (owner 2026-10-09): its sort, a match, a business with no price ---------- */
.bbp-web-sort { display: inline-flex; gap: 4px; margin: 2px 0 10px; padding: 3px; background: rgba(31, 35, 38, .05); border-radius: 999px; }
.bbp-web-sort button { padding: 6px 12px; font: 600 13px/1.1 "Inter", system-ui, sans-serif; color: var(--bbp-muted); background: none; border: 0; border-radius: 999px; cursor: pointer; }
.bbp-web-sort button.is-active { color: var(--bbp-ink); background: #fff; box-shadow: 0 1px 3px rgba(31, 35, 38, .12); }
.bbp-price-sum.is-none { font-weight: 600; color: var(--bbp-muted); }
.bbp-price-match { font: 600 12px/1.3 "Inter", system-ui, sans-serif; color: #13719f; }
.popup-container.wide .request-body_inner .blabla-comment .text p.bbp-web-trust, .bbp-price-row p.bbp-web-trust { margin: 2px 0 0; font: 600 12.5px/1.35 "Inter", system-ui, sans-serif !important; color: #1e7b3a; }

/* ---------- the one list (owner 2026-10-09): our seller marked, «Показати контакти», the product's page on its name ---------- */
.bbp-price-ours { padding: 1px 7px; font: 700 11px/1.5 "Inter", system-ui, sans-serif; color: #fff; background: #229ed9; border-radius: 9px; }
.bbp-price-shop.open-popup { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(92, 97, 102, .4); text-underline-offset: 3px; }
.bbp-price-row.is-ours { border-color: #b4def2; }
.bbp-price-row > .bbp-offer-contacts { flex: 1 0 100%; margin: 4px 0 0; }
a.bbp-price-what-link { display: block; margin: 2px 0 0; overflow: hidden; font: 400 13px/1.4 "Inter", system-ui, sans-serif; color: #13719f; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
a.bbp-price-what-link:hover { text-decoration: underline; }
.bbp-show-contacts, .bbp-price-row .bbp-open-contacts { white-space: nowrap; }
.bbp-call-mail, .bbp-call-site { display: block; margin: -6px 0 12px; font: 600 15px/1.4 "Inter", system-ui, sans-serif; color: #13719f; text-decoration: none; word-break: break-all; }

/* ---------- a web company's profile inside BlaBlaPrice (owner 2026-10-09) ---------- */
.bbp-company .request-body_inner { max-width: 720px; }
.bbp-company-card, .bbp-company-block { margin: 0 0 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 16px; }
.bbp-company-name { margin: 0 0 4px; font: 700 18px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-company-kind, .bbp-company-line { margin: 0 0 4px; font: 400 14px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-company-note { margin: 8px 0 0; font: 500 12.5px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-company-title { margin: 0 0 8px; font: 700 15px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-company-contact { display: block; margin: 0 0 6px; font: 600 15px/1.4 "Inter", system-ui, sans-serif; color: #13719f; text-decoration: none; word-break: break-all; }
.bbp-company-contact.is-social { font-weight: 500; font-size: 14px; }
.bbp-company-review { margin: 10px 0 6px; }
.bbp-company-ask { margin: 0 0 8px; font: 600 14.5px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-company-rate { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.bbp-company-text { display: block; box-sizing: border-box; width: 100%; margin: 0 0 10px; padding: 10px 12px; font: 400 14.5px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #faf9f5; border: 1px solid var(--bbp-line); border-radius: 12px; resize: vertical; }
.bbp-company-reviews { margin: 12px 0 0; padding: 0; list-style: none; }
.bbp-company-rv { padding: 10px 0; border-top: 1px solid var(--bbp-line); }
.bbp-company-rv-top { margin: 0 0 4px; font: 500 13px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-company-rv-top span { font-weight: 700; color: var(--bbp-ink); }
.bbp-company-rv-text { margin: 0; font: 400 14.5px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); white-space: pre-line; }

/* ---------- a personal offer as its own chat (owner 2026-10-09): its card in the list, its popup ---------- */
.bbp-row-price { margin-left: 6px; font: 700 13px/1.2 "Inter", system-ui, sans-serif; color: var(--bbp-ink); white-space: nowrap; }
.bbp-offer-chat .request-head .d-flex { align-items: center; gap: 12px; }
.bbp-chat-av { display: flex; flex: none; }
.bbp-chat-av .bbp-av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font: 600 16px/1 "Inter", system-ui, sans-serif; }
.bbp-chat-av .bbp-av img { width: 100%; height: 100%; object-fit: cover; }
.bbp-chat-head { display: flex; flex-direction: column; min-width: 0; }
.bbp-chat-head .title { margin: 0; font: 700 17px/1.25 "Inter", system-ui, sans-serif; }
.bbp-chat-sub { font: 500 13px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-chat-req { display: flex; flex-direction: column; align-items: flex-end; margin: 4px 0 16px; }
.bbp-chat-label { margin: 0 0 6px; font: 600 12.5px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-chat-bubble { max-width: 80%; margin: 0; padding: 10px 14px; font: 400 15px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #e9f3fa; border-radius: 16px 16px 16px 4px; white-space: pre-line; }
.bbp-chat-myreview { margin: 14px 0 0; padding: 12px 14px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 14px; }
.bbp-chat-rv { margin: 0; font: 400 14.5px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-personal-note { margin: 4px 0 12px; font: 500 14px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }

/* ---------- the same contacts for our sellers and the web's: the review under them (owner 2026-10-09) ---------- */
.bbp-crv { margin: 10px 0 0; }
.bbp-crv .bbp-crv-form { margin: 0; }
.bbp-crv .bbp-company-text { background: #fff; }
.bbp-crv.is-done { margin: 10px 0 0; }
.bbp-crv-mine { margin: 0; font: 400 14px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-crv-label { display: block; margin: 0 0 2px; font: 600 12.5px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-crv-note { margin: 6px 0 0; font: 500 13px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-crv-note a { color: #13719f; text-decoration: none; font-weight: 600; }
.bbp-crv-note a:hover { text-decoration: underline; }
.bbp-chat-offer .bbp-offer-contacts { margin-right: 0; }

/* ---------- «Це моя компанія» (owner 2026-10-09) ---------- */
.bbp-company-claim { display: inline-flex; align-items: center; margin: 10px 0 0; padding: 0 14px; height: 34px; font: 600 13.5px/1 "Inter", system-ui, sans-serif; color: #13719f; text-decoration: none; background: rgba(34, 158, 217, .12); border-radius: 17px; }
.bbp-company-note.is-ok { color: #2e7d32; font-weight: 600; }
.bbp-claim .bbp-agent-card h3 { margin: 0 0 8px; font: 700 17px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-claim ol { margin: 0 0 12px; padding-right: 22px; list-style: decimal; }
.bbp-claim ol li::marker { font-weight: 700; color: var(--bbp-muted); }
.bbp-claim ol li { display: list-item; list-style: decimal outside; margin: 0 0 12px; font: 400 14.5px/1.6 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-claim .bbp-agent-code code { word-break: break-all; }
.bbp-claim-state { margin: 0 0 10px; font: 600 14.5px/1.5 "Inter", system-ui, sans-serif; }
.bbp-claim-state.is-ok { color: #2e7d32; }
.bbp-claim-state.is-wait { color: #9a5212; }
.bbp-claim-list { margin: 0; padding: 0; list-style: none; }
.bbp-claim-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bbp-line); font: 500 14px/1.4 "Inter", system-ui, sans-serif; }
.bbp-claim-list li:first-child { border-top: 0; }
.bbp-claim-list a { color: #13719f; text-decoration: none; }
.bbp-claim-list a:hover { text-decoration: underline; }
.bbp-claim-list span { color: var(--bbp-muted); white-space: nowrap; }

/* ---------- the company's profile: its stars in the row, a small window (owner 2026-10-09) ---------- */
.bbp-price-rate { padding: 0; font: 600 12.5px/1.4 "Inter", system-ui, sans-serif; color: #13719f; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.bbp-price-rate:hover { text-decoration: underline; }
.bbp-prof-pop { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 30, .45); }
.bbp-prof-card { position: relative; box-sizing: border-box; width: 100%; max-width: 460px; max-height: min(82vh, 720px); overflow-y: auto; padding: 20px 20px 16px; background: #fff; border-radius: 18px; box-shadow: 0 18px 48px rgba(0, 0, 0, .22); scrollbar-width: thin; }
.bbp-prof-x { position: absolute; top: 10px; left: 12px; width: 32px; height: 32px; font: 400 24px/1 system-ui, sans-serif; color: #5c6166; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-prof-wait { margin: 8px 0; font: 500 14px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-prof-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px 36px; }
.bbp-prof-av { display: flex; flex: none; }
.bbp-prof-av .bbp-av { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font: 600 17px/1 "Inter", system-ui, sans-serif; }
.bbp-prof-av .bbp-av img { width: 100%; height: 100%; object-fit: cover; }
.bbp-prof-name { margin: 0; font: 700 17px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-prof-line { margin: 2px 0 0; font: 400 13px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-prof-rate { margin: 3px 0 0; font: 600 13.5px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-prof-contacts { margin: 0 0 14px; }
.bbp-prof-contacts .bbp-offer-contacts { margin: 0; }
.bbp-prof-contacts > .bbp-contact-links { margin: 0 0 4px; }
.bbp-prof-title { margin: 0 0 6px; font: 700 14.5px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-prof-empty { margin: 0; font: 400 13.5px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-prof-rv { padding: 10px 0; border-top: 1px solid var(--bbp-line); }
.bbp-prof-rv-top { margin: 0 0 3px; font: 500 12.5px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-prof-rv-top b { color: var(--bbp-ink); }
.bbp-prof-rv-req { margin: 0 0 4px; font: 400 12.5px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-prof-rv-text { margin: 0; font: 400 14px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); white-space: pre-line; }
.bbp-prof-rv-reply { margin: 6px 12px 0 0; padding: 6px 10px; font: 400 13.5px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #f3f6f8; border-radius: 10px; }
.bbp-prof-rv-reply span { display: block; font-weight: 600; font-size: 12px; color: var(--bbp-muted); }
.bbp-prof-claim { margin: 14px 0 0; padding-top: 12px; font: 400 12.5px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-muted); border-top: 1px solid var(--bbp-line); }
.bbp-prof-claim a { font-weight: 600; color: #13719f; text-decoration: none; }
.bbp-prof-claim a:hover { text-decoration: underline; }
@media (max-width: 600px) { .bbp-prof-pop { align-items: flex-end; padding: 0; } .bbp-prof-card { max-width: none; max-height: 86vh; border-radius: 18px 18px 0 0; } }
/* the sort of the one list fits a phone: one line, the words whole (2026-10-09) */
.bbp-web-sort { max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
.bbp-web-sort button { flex: none; white-space: nowrap; }
@media (max-width: 600px) { .bbp-web-sort button { padding: 6px 10px; font-size: 12.5px; } }

/* ---------- a personal offer at the conversation's end (owner 2026-10-09) ---------- */
.bbp-pm-msg .text { width: 100%; }
.bbp-pm-msg .bbp-pm { margin: 0; }
.bbp-pm .bbp-offer-who { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.bbp-pm-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }
.bbp-pm .bbp-offer-contacts { margin-right: 0; }

/* the row's availability and stars (owner 2026-10-09) */
.bbp-price-rate { display: inline-flex; align-items: baseline; gap: 6px; text-align: right; }
.bbp-price-rate:hover { text-decoration: none; }
.bbp-price-rate:hover .bbp-price-avail, .bbp-price-rate:hover .bbp-price-stars { text-decoration: underline; }
.bbp-price-avail { font: 500 12.5px/1.4 "Inter", system-ui, sans-serif; color: #5c6166; }
.bbp-price-avail.is-in { color: #2e7d32; }
.bbp-price-stars { font: 600 12.5px/1.4 "Inter", system-ui, sans-serif; color: #13719f; }
.bbp-pm-name { flex-direction: column; align-items: flex-start; gap: 1px; }
.bbp-pm-name b { font: 700 15px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-price-stars.is-plain { font-weight: 500; }

/* the row's availability and stars as plain text; the profile with the contacts (owner 2026-10-09) */
.bbp-price-meta { display: inline-flex; align-items: baseline; gap: 6px; }
.bbp-pm-name { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.bbp-prof-contacts .bbp-offer-contacts { margin: 0; }
.bbp-prof-contacts .bbp-crv-note a { white-space: nowrap; }

/* the company's own description (owner 2026-10-09) */
.bbp-set-about { align-items: start; }
.bbp-set-about textarea { box-sizing: border-box; width: 100%; min-height: 76px; padding: 10px 12px; font: 14px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 12px; resize: vertical; }
.bbp-set-about-hint { margin: -2px 142px 12px 0; font-size: 12.5px; }
@media (max-width: 600px) { .bbp-set-about-hint { margin-right: 0; } }
.bbp-price-about { margin: 2px 0 0; font: 400 12.5px/1.45 "Inter", system-ui, sans-serif; color: #5c6166; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bbp-pm-about { margin: 0 50px 6px 0; }
@media (max-width: 600px) { .bbp-pm-about { margin-right: 0; } }
.bbp-prof-about { margin: 0 0 14px; font: 400 14px/1.55 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-price-list .bbp-price-row p.bbp-price-about, .bbp-pm p.bbp-price-about { margin: 3px 0 0 !important; font: 400 12.5px/1.45 "Inter", system-ui, sans-serif !important; color: #5c6166 !important; }
.bbp-pm p.bbp-pm-about { margin: 0 50px 6px 0 !important; }
@media (max-width: 600px) { .bbp-pm p.bbp-pm-about { margin-right: 0 !important; } }
.popup-container.wide .request-body_inner .blabla-comment .text p.bbp-price-about { margin: 3px 0 0 !important; font: 400 12.5px/1.45 "Inter", system-ui, sans-serif !important; color: #5c6166 !important; }
.popup-container.wide .request-body_inner .blabla-comment .text p.bbp-pm-about { margin: 0 50px 6px 0 !important; }
@media (max-width: 600px) { .popup-container.wide .request-body_inner .blabla-comment .text p.bbp-pm-about { margin-right: 0 !important; } }

/* ---------- Luna's models to choose from (owner 2026-10-11) ---------- */
.bbp-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0 0 8px; }
.bbp-ask-opt.bbp-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: auto; min-height: 0; padding: 10px 12px; text-align: right; white-space: normal; border-radius: 14px; }
.bbp-pick-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.bbp-pick-top b { font: 700 14px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-pick-diff { padding: 1px 8px; font: 600 11.5px/1.5 "Inter", system-ui, sans-serif; color: #13719f; background: rgba(34, 158, 217, .12); border-radius: 9px; }
.bbp-pick-about { font: 400 12.5px/1.45 "Inter", system-ui, sans-serif; color: #5c6166; }
.bbp-ask-opt.bbp-pick[aria-pressed="true"] { border-color: #229ed9; box-shadow: 0 0 0 2px rgba(34, 158, 217, .25); }
.bbp-ask-opt.bbp-pick[aria-pressed="true"] .bbp-pick-top b, .bbp-ask-opt.bbp-pick[aria-pressed="true"] .bbp-pick-about { color: inherit; }
@media (max-width: 600px) { .bbp-picks { grid-template-columns: 1fr; } }
.bbp-ask-opts.bbp-picks { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.bbp-ask-opts.bbp-picks .bbp-ask-opt.bbp-pick { width: 100%; box-sizing: border-box; margin: 0; }
.bbp-ask-opt.bbp-pick[aria-pressed="true"] .bbp-pick-diff { color: #fff !important; background: rgba(255, 255, 255, .22) !important; }
@media (max-width: 600px) { .bbp-ask-opts.bbp-picks { grid-template-columns: 1fr; } }

/* the rating's source on a model's card (owner 2026-10-11) */
.bbp-pick-src { font: 600 12px/1.4 "Inter", system-ui, sans-serif; color: #2e7d32; }
.bbp-ask-opt.bbp-pick[aria-pressed="true"] .bbp-pick-src { color: #fff; }
.bbp-pick-sources { margin: 2px 0 8px; font: 400 12.5px/1.5 "Inter", system-ui, sans-serif; color: #5c6166; }
.bbp-pick-sources a { color: #13719f; text-decoration: none; }
.bbp-pick-sources a:hover { text-decoration: underline; }

/* ===== Luna's chat on a request (owner 2026-10-12): the buyer's bubbles and BlaBlaPrice's answers under the work log, the
   clarification it sent to the sellers, a new request offered, short answers to tap; the request's story for sellers; the window
   «Переглянути мій запит» ===== */
.popup-container.wide .bbp-chat-log { margin-top: 18px; }
.popup-container.wide .bbp-chat-log:empty { display: none; }
.popup-container.wide .bbp-chat-log > .text-right { margin: 16px 0 0; }
.popup-container.wide .bbp-chat-log > .text-right:first-child { margin-top: 0; }
.popup-container.wide .bbp-chat-log > .blabla-comment { margin-top: 16px !important; }
.popup-container.wide .bbp-chat-log > .blabla-comment:first-child { margin-top: 0 !important; }
.bbp-chat-log .is-new { animation: bbp-row-in .3s ease both; }
.bbp-cl-upd { margin: 10px 0 0; padding: 10px 14px 12px; background: #f3f1ea; border-radius: 14px; }
.bbp-cl-upd.is-removed { opacity: .6; }
.popup-container.wide .bbp-cl-upd p.bbp-cl-upd-say { margin: 0; font-weight: 600; }
.bbp-cl-upd .bbp-tick { margin-left: 6px; }
.popup-container.wide .bbp-cl-upd p.bbp-cl-upd-note { margin: 4px 0 10px; }
.bbp-cl-new { margin: 10px 0 0; padding: 10px 14px 12px; background: #e9f5fc; border-radius: 14px; box-shadow: inset 0 0 0 1px #bfe3f6; }
.popup-container.wide .bbp-cl-new p.bbp-cl-new-text { margin: 0 0 10px; font-weight: 500; }
.bbp-cl-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.bbp-cl-q { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; font: 600 13.5px/1.25 "Inter", system-ui, sans-serif; color: #13719f; text-align: right; background: #e2f2fa; border: 0; border-radius: 17px; cursor: pointer; }
.bbp-cl-q:focus-visible, .bbp-reqview-x:focus-visible { outline: 2px solid #1a7cad; outline-offset: 2px; }
@media (hover: hover) { .bbp-cl-q:hover { background: #d3ebf7; } }

/* the request's story for sellers */
.bbp-story-now { margin: 0 0 16px; padding: 12px 16px; background: #e9f5fc; border-radius: 14px; box-shadow: inset 0 0 0 1px #bfe3f6; }
.popup-container.wide .bbp-story-now p { margin: 0; }
.popup-container.wide .bbp-story-now p.bbp-story-now-label { font: 700 12px/1.3 "Inter", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #13719f; }
.popup-container.wide .bbp-story-now p.bbp-story-now-text { margin-top: 4px; font: 500 15px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.popup-container.wide .bbp-story-now p.bbp-story-now-hint { margin-top: 6px; font-size: 13px; color: var(--bbp-muted); }
.popup-container.wide .bbp-story { margin: 14px 0 6px; }
.popup-container.wide .bbp-story > .blabla-comment + .blabla-comment { margin-top: 12px !important; }
.popup-container.wide .bbp-story p.bbp-story-title { margin: 0; font-weight: 600; }
.bbp-story-time { margin-right: 4px; font-weight: 400; font-size: 12.5px; color: var(--bbp-muted); white-space: nowrap; }
.popup-container.wide .bbp-story p.bbp-story-note { margin: 3px 0 0; }
.popup-container.wide .bbp-story p.bbp-story-after { margin: 6px 0 0; font-size: 13.5px; color: #9a5b00; }
/* the list's card: «уточнено» before the request */
.bbp-row-upd { display: inline-block; margin-left: 2px; padding: 0 6px; font: 600 11.5px/18px "Inter", system-ui, sans-serif; color: #13719f; vertical-align: 1px; background: #e2f2fa; border-radius: 6px; }
.bbp-row-upd.is-after { color: #8a5200; background: #fff1d6; }

/* «Переглянути мій запит»: a window over the popup */
.bbp-reqview { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 20, 25, .45); }
.bbp-reqview-card { position: relative; box-sizing: border-box; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px 20px 20px; font: 400 14.5px/1.55 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); animation: bbp-li-in .2s ease both; }
.bbp-reqview-x { position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; font-size: 24px; line-height: 1; color: var(--bbp-muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-reqview-title { margin: 0 0 16px 36px; font: 600 20px/1.25 "Source Serif 4", Georgia, serif; text-wrap: balance; }
.bbp-reqview-label { margin: 0 0 6px; font-size: 12.5px; color: var(--bbp-muted); }
.bbp-reqview-first { margin: 0 0 16px; padding: 10px 14px; background: #edece9; border-radius: 16px 16px 16px 4px; }
.bbp-reqview .bbp-story-now { margin-bottom: 16px; }
.bbp-reqview .bbp-story-now p { margin: 0; }
.bbp-reqview .bbp-story-now-label { font: 700 12px/1.3 "Inter", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #13719f; }
.bbp-reqview .bbp-story-now-text { margin-top: 4px !important; font-weight: 500; }
.bbp-reqview .bbp-story-now-hint { margin-top: 6px !important; font-size: 13px; color: var(--bbp-muted); }
.bbp-reqview-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bbp-reqview-list li { margin: 0; padding: 10px 14px; background: #f3f1ea; border-radius: 14px; list-style: none; }
.bbp-reqview-list p { margin: 0; }
.bbp-reqview-list .bbp-story-title { font-weight: 600; }
.bbp-reqview-list .bbp-story-note { margin-top: 3px; }
.bbp-reqview-list .bbp-story-undo { margin-top: 8px; }
.bbp-reqview-none { margin: 0; color: var(--bbp-muted); }
.bbp-reqview-error { margin: 12px 0 0; color: #b4443a; }
.bbp-req-edit-link[data-req-view] { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .bbp-chat-log .is-new, .bbp-reqview-card { animation: none; } }

/* ===== the personal chat of a buyer and a seller (owner 2026-10-12): mine right, theirs left, the field under them ===== */
.bbp-deal { max-width: 720px; margin: 22px auto 6px; padding: 14px 16px 12px; font: 400 14.5px/1.5 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #faf9f6; border: 1px solid var(--bbp-line); border-radius: 16px; }
.bbp-deal p { margin: 0; }
.bbp-deal .bbp-deal-title { font-weight: 700; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--bbp-muted); }
.bbp-deal .bbp-deal-hint { margin-top: 6px; color: var(--bbp-muted); }
.bbp-deal-log { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bbp-deal-log:empty { display: none; }
.bbp-dm { max-width: 82%; padding: 8px 12px 6px; border-radius: 16px; }
.bbp-dm.is-mine { align-self: flex-end; background: #edece9; border-bottom-left-radius: 4px; }
.bbp-dm.is-theirs { align-self: flex-start; background: #fff; box-shadow: inset 0 0 0 1px var(--bbp-line); border-bottom-right-radius: 4px; }
.bbp-dm.is-new { animation: bbp-row-in .3s ease both; }
.bbp-deal .bbp-dm-text { overflow-wrap: anywhere; }
.bbp-dm-time { display: block; margin-top: 2px; font-size: 11.5px; color: var(--bbp-muted); text-align: left; }
.bbp-dm-seen.is-seen { color: #2e8b57; }
.bbp-deal .bbp-dm-warn { margin: 6px 0 2px; padding: 8px 10px; font-size: 13.5px; color: #8a3a2f; background: #fdecea; border-radius: 10px; }
.bbp-dm-share { margin: 6px 0 2px; padding: 0; font: 600 13px/1.4 "Inter", system-ui, sans-serif; color: #13719f; background: none; border: 0; cursor: pointer; }
.bbp-dm-shared { display: block; margin: 6px 0 2px; font-size: 13px; color: #2e8b57; }
.bbp-deal-form { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 12px; }
.bbp-deal-form textarea { flex: 1 1 0; min-width: 0; min-height: 42px; max-height: 160px; box-sizing: border-box; margin: 0; padding: 10px 14px; font: 400 15px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid var(--bbp-line); border-radius: 21px; outline: 0; resize: none; }
.bbp-deal-form textarea:focus { border-color: #229ed9; box-shadow: 0 0 0 3px rgba(34, 158, 217, .15); }
.bbp-deal-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: #fff; background: #229ed9; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-deal-send:disabled { opacity: .6; cursor: progress; }
.bbp-deal-send:focus-visible, .bbp-dm-share:focus-visible, .bbp-deal-card:focus-visible { outline: 2px solid #1a7cad; outline-offset: 2px; }
.bbp-deal .bbp-deal-error { flex: 1 0 100%; color: #b4443a; font-size: 13.5px; }
.bbp-deal .bbp-deal-note { margin-top: 8px; font-size: 12.5px; color: var(--bbp-muted); }
/* a seller's question in the request's list */
.bbp-deal-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--bbp-line); cursor: pointer; }
.bbp-deal-card .bbp-av, .bbp-deal-card .avatar { flex: none; }
.bbp-deal-card-body { flex: 1; min-width: 0; }
.popup-container.wide .bbp-deal-card p { margin: 0; }
.popup-container.wide .bbp-deal-card p.bbp-deal-card-text { overflow: hidden; color: var(--bbp-muted); text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bbp-deal-card-go { flex: none; }
.bbp-deal-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-right: 4px; font: 700 11px/1 "Inter", system-ui, sans-serif; color: #fff; vertical-align: 1px; background: #229ed9; border-radius: 9px; }
.bbp-row-upd.is-msg { color: #fff; background: #229ed9; }
@media (max-width: 575px) { .bbp-deal { margin-right: 0; margin-left: 0; padding: 12px; } .bbp-dm { max-width: 90%; } .bbp-deal-card-go { display: none; } }
@media (prefers-reduced-motion: reduce) { .bbp-dm.is-new { animation: none; } }
.bbp-deal-card > .bbp-av { flex: 0 0 38px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font: 700 14px/1 "Inter", system-ui, sans-serif; border-radius: 50%; }
.bbp-deal-card > .bbp-av img { width: 100%; height: 100%; object-fit: cover; }

.popup-container.wide .bbp-chat-log > p.bbp-cl-note { margin: 16px 0 0; padding: 0 54px 0 0; font: 400 13px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
@media (max-width: 575px) { .popup-container.wide .bbp-chat-log > p.bbp-cl-note { padding-right: 0; } }

.bbp-deal-form[hidden], .bbp-deal-note[hidden] { display: none !important; }
.bbp-deal.is-folded { padding: 0; background: transparent; border: 0; }
.bbp-deal.is-folded .bbp-deal-title { display: none; }
.bbp-deal.is-folded .bbp-deal-hint { margin: 0 0 8px; }
.bbp-deal-open { margin-top: 2px; }
.bbp-done li.is-warn { color: #8a5200; }
.bbp-done li.is-warn::before { content: "!"; background: #e8962c; }
.popup-container.wide .bbp-your-move p.bbp-move-cost { margin-top: 6px; font-size: 13.5px; color: var(--bbp-muted); }
.bbp-deal-log + .bbp-deal-hint { margin-top: 8px !important; font-size: 13px; }
.bbp-row-top .bbp-row-upd { flex: none; margin: 0 auto 0 6px; white-space: nowrap; }
.bbp-row-top .bbp-row-upd + .bbp-row-lift, .bbp-row-top .bbp-row-upd + .bbp-row-ticks { margin-right: 0; }
.bbp-row-msg { font-weight: 600; color: #1a7cad; }

/* «Чекаю на пропозиції…» under the chat, once the work log above is done (UX round 2026-10-12) */
.popup-container.wide .bbp-wait-tail { margin-top: 18px; }
.bbp-check-msg.bbp-work:not([data-ended]) ~ .bbp-wait-tail { display: none; }
.popup-container.wide .bbp-deal-card p.bbp-deal-card-answer { margin-top: 4px; font-size: 13.5px; color: var(--bbp-ink); }

/* ---------- the card over Luna's chat field (owner 2026-10-12, by his example): her questions one a page, then «Що далі?» ---------- */
.bbp-lcard { margin: 0 0 10px; padding: 12px 16px 8px 10px; background: #fff; border: 1px solid #ddd8ce; border-radius: 18px; box-shadow: 0 1px 2px rgba(31, 35, 38, .04), 0 10px 30px rgba(31, 35, 38, .10); animation: bbp-li-in .18s ease both; }
.bbp-lcard[hidden], .bbp-lcard-page[hidden], .bbp-lcard-pill[hidden] { display: none !important; }
.bbp-lcard.is-sending { opacity: .55; pointer-events: none; }
.bbp-lcard-head { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; }
.bbp-lcard p.bbp-lcard-q { flex: 1; min-width: 0; margin: 6px 0 4px; font: 600 15px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-lcard-nav { display: inline-flex; align-items: center; flex: none; gap: 2px; font: 500 13px/1 "Inter", system-ui, sans-serif; color: var(--bbp-muted); white-space: nowrap; }
.bbp-lcard-nav button, .bbp-lcard-x { width: 32px; height: 32px; padding: 0; font-size: 20px; line-height: 1; color: var(--bbp-muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-lcard-nav button:disabled { opacity: .35; cursor: default; }
.bbp-lcard-x { flex: none; font-size: 24px; }
.bbp-lcard-opts { max-height: min(42vh, 330px); overflow-y: auto; margin: 0; padding: 0; list-style: none; overscroll-behavior: contain; }
.bbp-lcard-opts > li { margin: 0; padding: 0; border-top: 1px solid var(--bbp-line); }
.bbp-lcard-opts > li:first-child { border-top: 0; }
.bbp-lcard-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 0 9px 6px; font: 500 14.5px/1.35 "Inter", system-ui, sans-serif; color: var(--bbp-ink); text-align: right; background: none; border: 0; cursor: pointer; }
.bbp-lcard-opt:focus-visible { outline: 2px solid #1a7cad; outline-offset: 2px; border-radius: 10px; }
.bbp-lcard-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--bbp-muted); background: #f3f1ea; border-radius: 8px; }
.bbp-lcard-t { flex: 1; min-width: 0; }
.bbp-lcard-t small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--bbp-muted); }
.bbp-lcard-count { display: inline-block; min-width: 22px; margin-right: 4px; padding: 2px 7px; font: 700 12px/1.3 "Inter", system-ui, sans-serif; font-style: normal; color: #fff; text-align: center; background: #229ed9; border-radius: 999px; }
.bbp-lcard p.bbp-lcard-src { margin: 4px 40px 2px 0; font-size: 12.5px; color: var(--bbp-muted); }
.bbp-lcard-own { display: flex; align-items: center; gap: 12px; padding: 6px 0 2px; border-top: 1px solid var(--bbp-line); }
.bbp-lcard-pen { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; font-size: 15px; color: var(--bbp-muted); }
.bbp-lcard-own input { flex: 1; min-width: 0; height: 36px; padding: 0; font: 500 14.5px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: none !important; border: 0 !important; box-shadow: none !important; outline: 0; }
.bbp-lcard-own input::placeholder { color: var(--bbp-muted); opacity: 1; }
.bbp-lcard-skip { flex: none; height: 32px; padding: 0 14px; font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid #d3cec4; border-radius: 999px; cursor: pointer; }
.bbp-lcard-pill { display: block; height: 32px; margin: 0 auto 8px 0; padding: 0 14px; font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--bbp-ink); background: #fff; border: 1px solid #d3cec4; border-radius: 999px; box-shadow: 0 4px 12px rgba(31, 35, 38, .08); cursor: pointer; }
/* what a line of the menu points at, lit for a moment */
.popup-container .is-flash:is(.bbp-price-msg, .bbp-web-msg, .bbp-pm-msg) { animation: bbp-lc-flash 1.6s ease-out; border-radius: 16px; }
@keyframes bbp-lc-flash { 0%, 40% { box-shadow: 0 0 0 4px rgba(34, 158, 217, .45); } 100% { box-shadow: 0 0 0 4px rgba(34, 158, 217, 0); } }
@media (max-width: 767px) {
    .bbp-lcard { padding: 10px 12px 6px 6px; border-radius: 16px; }
    .bbp-lcard p.bbp-lcard-q { font-size: 14.5px; }
    .bbp-lcard-opts { max-height: 38vh; }
    .bbp-lcard-opt { font-size: 14px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .bbp-lcard, .popup-container .is-flash:is(.bbp-price-msg, .bbp-web-msg, .bbp-pm-msg) { animation: none; } }
/* the line under the request's bubble («запит уточнено · як його бачать продавці ›») wraps on a phone instead of running off the left edge */
@media (max-width: 767px) {
    .request-body .text-right .message .inner .date { width: max-content; max-width: calc(100vw - 48px); white-space: normal; text-align: left; }
}
/* the models' notes in one line on a phone: the card stays low */
@media (max-width: 767px) {
    .bbp-lcard-t small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- Luna's questions before the request goes (owner 2026-10-12, RequestAsk): one at a time in the card ---------- */
.bbp-lcard p.bbp-lcard-foot { margin: 2px 0 0; padding: 4px 40px 2px 0; }
.bbp-lcard-enough { padding: 4px 0; font: 600 13px/1.3 "Inter", system-ui, sans-serif; color: #1a7cad; background: none; border: 0; cursor: pointer; }
.bbp-lcard-enough:focus-visible { outline: 2px solid #1a7cad; outline-offset: 2px; border-radius: 6px; }
.bbp-lcard p.bbp-lcard-making, .bbp-lcard.is-sending p.bbp-lcard-q { color: var(--bbp-muted); animation: bbp-blink 2s ease-in-out infinite; }
.bbp-lcard[data-mode="wait"] { padding-bottom: 10px; }
.bbp-check-hint.bbp-clarify-how { color: var(--bbp-muted); }
/* the talk before the last clarification: one line over the work log, unfolded by a tap */
.popup-container .bbp-chat-prev { margin: 14px 0 4px; text-align: center; }
.bbp-chat-prev-open { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--bbp-muted); background: rgba(31, 35, 38, .06); border: 0; border-radius: 999px; cursor: pointer; }
.bbp-chat-prev-open span { display: inline-block; transition: transform .15s ease; }
.bbp-chat-prev-open.is-open span { transform: rotate(-90deg); }
.bbp-chat-prev-log { margin-top: 10px; text-align: right; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .bbp-lcard p.bbp-lcard-making, .bbp-lcard.is-sending p.bbp-lcard-q { animation: none; } }
/* a request waiting for the answers: no «Чекаю на пропозиції» yet (it is not with the sellers) */
.bbp-check-msg:not(.bbp-work) ~ .bbp-wait-tail { display: none; }
/* the buyer's answers one after another: room for each one's time under it */
.popup-container.wide :is(.bbp-chat-log, .bbp-chat-prev-log) > .text-right ~ .text-right { margin-top: 30px; }
.popup-container.wide .bbp-chat-prev-log > .text-right { margin: 16px 0 0; }
.popup-container.wide .bbp-chat-prev-log > .blabla-comment { margin-top: 16px !important; }
.popup-container.wide .bbp-chat-prev-log > :first-child { margin-top: 0 !important; }

/* ---------- the personal chat in the chat's own look (owner 2026-10-12: «у нашому стилі з аватаркою»; one field at the bottom) ---------- */
.bbp-deal.is-chat { max-width: none; margin: 16px 0 0; padding: 0; background: none; border: 0; border-radius: 0; }
.bbp-deal.is-chat .bbp-deal-log { display: block; margin: 0; }
.popup-container.wide .bbp-deal-log > .bbp-dmsg { margin-top: 16px; }
.popup-container.wide .bbp-deal-log > .bbp-dmsg:first-child { margin-top: 0; }
/* my messages one after another: room for each one's time under it */
.popup-container.wide .bbp-deal-log > .bbp-dmsg.is-mine ~ .bbp-dmsg.is-mine { margin-top: 30px; }
.bbp-dmsg.is-new { animation: bbp-row-in .3s ease both; }
.bbp-dmsg .comment { overflow-wrap: anywhere; }
.bbp-dmsg .bbp-dm-seen { margin-right: 2px; }
.bbp-dmsg.is-mine > .bbp-dm-share, .bbp-dmsg.is-mine > .bbp-dm-shared { display: block; margin: 26px auto 0 4px; text-align: left; }
.bbp-dmsg .bbp-dm-warn { margin: 8px 0 2px; padding: 8px 10px; font-size: 13.5px; color: #8a3a2f; background: #fdecea; border-radius: 10px; }
.popup-container.wide .bbp-deal.is-chat p.bbp-deal-hint, .popup-container.wide .bbp-deal.is-chat p.bbp-deal-note { margin: 30px 0 0; font-size: 13px; line-height: 1.45; color: var(--bbp-muted); text-align: center; }
.bbp-deal.is-chat .bbp-deal-log:empty + p { margin-top: 0 !important; }
/* the buyer's field at the bottom, as the request's chat field */
.bbp-deal-dock.bbp-deal-form { display: block; position: sticky; margin-top: 0; }
.popup-container.wide .bbp-deal-dock p.bbp-deal-error { margin: 6px 6px 0; font-size: 13.5px; color: #b4443a; }
/* the seller's one field: a question went as a message — an offer meant goes by a tap; editing the offer says so */
.popup-container.wide p.bbp-asked { margin: 14px 0 0; font-size: 13px; color: var(--bbp-muted); text-align: center; }
.bbp-asked-offer { padding: 0; font: 600 13px/1.4 "Inter", system-ui, sans-serif; color: #1a7cad; background: none; border: 0; cursor: pointer; }
.bbp-compose-mode { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 8px; font: 600 13px/1.3 "Inter", system-ui, sans-serif; color: #1a7cad; }
.bbp-compose-mode button { padding: 4px 0; font: 600 13px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-muted); background: none; border: 0; cursor: pointer; }
.input-group.bbp-steps[data-mode="message"] .list-files-uploaded, form[data-compose="message"] .bbp-templates { display: none !important; }
@media (prefers-reduced-motion: reduce) { .bbp-dmsg.is-new { animation: none; } }
/* the questions and answers before the work on the request (owner 2026-10-12: «щоб все було послідовно») */
.popup-container.wide .bbp-chat-before { margin: 18px 0 22px; }
.popup-container.wide .bbp-chat-before > .text-right { margin: 16px 0 0; }
.popup-container.wide .bbp-chat-before > .text-right ~ .text-right { margin-top: 30px; }
.popup-container.wide .bbp-chat-before > .blabla-comment { margin-top: 16px !important; }
.popup-container.wide .bbp-chat-before > :first-child { margin-top: 0 !important; }

/* the menu «Що далі?» once the questions and the search are over (owner 2026-10-12: «меню показуй після уточнюючих питань і пошуку,
   щоб не мішало»); the popup's field over the talk with no band of background: only under the field itself, fading */
.popup-container:has(.bbp-check-msg.bbp-work:not([data-ended]):not([data-settled])) .bbp-lcard[data-mode="menu"]:not([data-flow]) { display: none !important; }
html:not([data-theme="dark"]) .popup-container .bbp-req-dock { --bbp-dock-bg: #faf9f5; }
.popup-container .bbp-req-dock { background: none !important; }
.popup-container .bbp-req-dock .bbp-composer { position: relative; }
.popup-container .bbp-req-dock .bbp-composer::before { content: ""; position: absolute; z-index: -1; right: -40px; left: -40px; top: -16px; bottom: -60px; background: linear-gradient(to bottom, transparent, var(--bbp-dock-bg) 16px); pointer-events: none; }
/* the gap between the card and the field: the popup's background, so nothing of the talk shows through it */
.popup-container .bbp-req-dock .bbp-lcard { position: relative; }
.popup-container .bbp-req-dock .bbp-lcard::after { content: ""; position: absolute; z-index: -1; right: 0; left: 0; top: calc(100% - 18px); height: 32px; background: var(--bbp-dock-bg); pointer-events: none; }

/* Luna's questions before the request goes (owner 2026-10-12): no field under them, the answer chosen, «‹ Назад» left, «Далі» right */
.bbp-chat-form:has(.bbp-lcard[data-flow]) .bbp-composer:not(#bbp-none), .bbp-chat-form:has(.bbp-lcard[data-flow]) .bbp-lcard-pill { display: none !important; }
.bbp-chat-form .bbp-lcard[data-flow] { margin-bottom: 0; }
.bbp-lcard[data-flow] .bbp-lcard-opt[aria-pressed="true"] { color: #0f5f86; }
.bbp-lcard[data-flow] .bbp-lcard-opt[aria-pressed="true"] .bbp-lcard-n { color: #fff; background: #229ed9; }
.bbp-lcard[data-flow] .bbp-lcard-opts > li:has(> .bbp-lcard-opt[aria-pressed="true"]) { background: #eaf4fa; border-radius: 12px; border-top-color: transparent; }
.bbp-lcard[data-flow] .bbp-lcard-opts > li:has(> .bbp-lcard-opt[aria-pressed="true"]) + li { border-top-color: transparent; }
.bbp-lcard[data-flow] .bbp-lcard-opt { padding-right: 6px; }
.bbp-lcard[data-flow] .bbp-lcard-own.is-on .bbp-lcard-pen { color: #fff; background: #229ed9; border-radius: 8px; }
.bbp-lcard-steps { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 2px; padding-top: 8px; border-top: 1px solid var(--bbp-line); }
.bbp-lcard-back { height: 40px; padding: 0 8px; font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--bbp-muted); background: none; border: 0; cursor: pointer; }
.bbp-lcard-back[hidden] { display: inline-block !important; visibility: hidden; }
.bbp-lcard-go { height: 40px; margin-right: auto; padding: 0 26px; font: 600 14px/1 "Inter", system-ui, sans-serif; color: #fff; background: #229ed9; border: 0; border-radius: 20px; cursor: pointer; }
.bbp-lcard-go:disabled { opacity: .45; cursor: default; }
.bbp-lcard-go:focus-visible, .bbp-lcard-back:focus-visible { outline: 2px solid #1a7cad; outline-offset: 2px; }
/* where a found row's link leads (owner 2026-10-12): «Інтернет-магазин · estore.ua» */
.popup-container.wide .bbp-price-row p.bbp-price-site { margin: 2px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--bbp-muted); }
.popup-container.wide .bbp-price-list .bbp-price-row p.bbp-price-site { margin: 3px 0 0 !important; font-size: 13px !important; line-height: 1.4 !important; color: var(--bbp-muted) !important; }
/* the buyer's request popup has no free field (owner 2026-10-13: «це ми домовились не показувати в покупця»): the card's menu —
   the prices, the offers, «Уточнити запит» with Luna's questions — is the way; the chat with a seller keeps its own field */
.bbp-chat-form .bbp-composer:not(#bbp-none) { display: none !important; }
/* Luna's word to a seller on the offer: plain sentences */
.popup-container.wide .bbp-offer-word p.bbp-offer-advice { margin: 4px 0 0; }
/* «Відкрити контакти» in the chat with a seller (owner 2026-10-13) */
.popup-container.wide .bbp-deal-contacts { margin: 22px 0 0; text-align: center; }
.popup-container.wide .bbp-deal-contacts p.bbp-deal-error { margin: 8px 0 0; font-size: 13.5px; color: #b4443a; }
/* the header's share button on the right, where its card opens (owner 2026-10-13: «на головній перемісти іконку поширити праворуч») */
.head-main > .head-social { margin-right: auto; }
/* the buyer's request popup has no field under the card any more (2026-10-13): no filler under the card — it showed as a band
   under Luna's questions (owner 2026-10-13: «тут прибери цей фон») — and a little room under «Далі» */
.popup-container .bbp-req-dock .bbp-lcard::after { content: none !important; }
.bbp-chat-form .bbp-lcard[data-flow] { padding-bottom: 12px; }
/* «Свій варіант» in line with the numbered answers (owner 2026-10-13: «вирівняй свій варіант»): the same left room, the pen in
   the same square as the numbers */
.bbp-lcard[data-flow] .bbp-lcard-own { padding-right: 6px; }
.bbp-lcard .bbp-lcard-pen { width: 28px; height: 28px; font-size: 14px; background: #f3f1ea; border-radius: 8px; }
html[data-theme="dark"] .bbp-lcard .bbp-lcard-pen { background: var(--d-raised) !important; }
/* Luna's questions (owner 2026-10-13, a picture): «‹ Назад» before the question, «Далі» at the end of the own answer's line and only
   while it has words; a tapped answer goes on by itself, so no line of buttons under the answers */
.bbp-lcard[data-flow] .bbp-lcard-head { align-items: center; }
.bbp-lcard[data-flow] .bbp-lcard-head .bbp-lcard-back { flex: none; height: 32px; margin: 0 -8px 0 2px; padding: 0 8px; }
.bbp-lcard[data-flow] .bbp-lcard-head p.bbp-lcard-q { margin: 6px 0; }
.bbp-lcard[data-flow] .bbp-lcard-own .bbp-lcard-go { display: none; flex: none; height: 36px; padding: 0 22px; }
.bbp-lcard[data-flow] .bbp-lcard-own.is-on .bbp-lcard-go { display: inline-flex; align-items: center; }
.bbp-chat-form .bbp-lcard[data-flow] { padding-bottom: 8px; }
/* under the card at the foot of the request (owner 2026-10-13: «гарніше зроби низ меню»): the popup's own colour from behind the
   card's lower edge to the screen's edge — the talk scrolls away under the card instead of showing below it */
.popup-container .bbp-req-dock.is-fixed:has(.bbp-lcard:not([hidden])) { background: linear-gradient(var(--bbp-dock-bg), var(--bbp-dock-bg)) no-repeat right bottom / 100% calc(46px + env(safe-area-inset-bottom)) !important; }
/* «Поки немає персональних пропозицій» over the tips (owner 2026-10-13), «Щоб продавці відповіли швидше» under it, smaller; gone
   once an offer is in the chat */
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-check-title.bbp-tips-none { margin: 0 0 4px; }
.popup-container.wide .request-body_inner .bbp-check-msg .text p.bbp-check-title.bbp-tips-sub { margin: 0 0 8px; font-size: 15px !important; color: var(--bbp-muted); }
.popup-container:has(.bbp-chat-log .bbp-pm-msg) p.bbp-tips-none { display: none !important; }
.popup-container:has(.bbp-chat-log .bbp-pm-msg) .bbp-check-msg .text p.bbp-check-title.bbp-tips-sub { font-size: 17.5px !important; color: var(--bbp-ink); }
/* the countdown after «Чекаю на пропозиції» (owner 2026-10-13) and what its end means */
.bbp-timer { display: inline-block; margin-right: 6px; padding: 1px 8px; font: 600 14px/1.5 "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--bbp-ink); background: #f3f1ea; border-radius: 8px; white-space: nowrap; vertical-align: 1px; }
.bbp-timer.is-over { color: #b4443a; background: #fbe6e1; }
.popup-container.wide .bbp-wait-tail p.bbp-wait-note, .popup-container.wide .request-body_inner .bbp-wait-tail .blabla-comment .text p.bbp-wait-note { margin: 4px 0 0 !important; font: 400 13.5px/1.45 "Inter", system-ui, sans-serif !important; color: var(--bbp-muted) !important; }
html[data-theme="dark"] .bbp-timer { color: var(--d-text) !important; background: var(--d-raised) !important; }
html[data-theme="dark"] .bbp-timer.is-over { color: #f2a493 !important; background: rgba(224, 87, 62, .18) !important; }
html[data-theme="dark"] .popup-container.wide .bbp-wait-tail p.bbp-wait-note { color: var(--d-muted) !important; }
/* the found prices as search results (owner 2026-10-13, a picture): no card, the shop's letters by the price, the title big and blue —
   it opens the company's window, where the contacts open */
.bbp-price-list:has(> .bbp-price-row.is-serp) { gap: 22px; margin-top: 12px; }
.bbp-price-list .bbp-price-row.is-serp { display: block; padding: 0; background: none !important; border: 0 !important; border-radius: 0; }
.popup-container.wide .request-body_inner .bbp-check-msg .text .bbp-price-row.is-serp p.bbp-price-top { align-items: center; gap: 6px 10px; }
.bbp-price-row.is-serp .bbp-price-av { display: inline-flex; flex: none; }
.bbp-price-row.is-serp .bbp-price-av .bbp-av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; overflow: hidden; color: #fff; font: 700 11px/1 "Inter", system-ui, sans-serif; letter-spacing: .02em; border-radius: 50%; }
.bbp-price-row.is-serp .bbp-price-av .bbp-av img { width: 100%; height: 100%; object-fit: cover; }
.bbp-price-row.is-serp .bbp-price-sum { font-size: 15px; font-weight: 600; }
.bbp-price-row.is-serp .bbp-price-title { display: block; max-width: 100%; margin: 6px 0 0; padding: 0; overflow: hidden; font: 400 20px/1.3 "Inter", system-ui, sans-serif; color: #1a0dab; text-align: right; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; }
.popup-container.wide .request-body_inner .bbp-check-msg .text .bbp-price-row.is-serp p.bbp-price-title { margin: 6px 0 0 !important; font-size: 20px !important; color: var(--bbp-ink); }
.bbp-price-row.is-serp button.bbp-price-title { cursor: pointer; }
.bbp-price-row.is-serp button.bbp-price-title:hover { text-decoration: underline; }
.bbp-price-row.is-serp button.bbp-price-title:focus-visible { outline: 2px solid #1a7cad; outline-offset: 2px; border-radius: 4px; }
.bbp-price-row.is-serp .bbp-price-opened { font: 600 12.5px/1.4 "Inter", system-ui, sans-serif; color: #1e7b3a; }
.bbp-price-row.is-serp .bbp-price-opened::before { content: "✓ "; }
@media (max-width: 575px) {
    .bbp-price-row.is-serp .bbp-price-title { display: -webkit-box; font-size: 17px; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .popup-container.wide .request-body_inner .bbp-check-msg .text .bbp-price-row.is-serp p.bbp-price-title { font-size: 17px !important; }
}
html[data-theme="dark"] .bbp-price-row.is-serp .bbp-price-title { color: #8ab4f8 !important; }
html[data-theme="dark"] .bbp-price-row.is-serp p.bbp-price-title { color: var(--d-text) !important; }
html[data-theme="dark"] .bbp-price-row.is-serp .bbp-price-opened { color: #6fd08c !important; }
/* «Відкрити контакти» in the company's window (owner 2026-10-13) */
/* the window before the contacts are open (owner 2026-10-13, a picture): «Відкрити контакти» by the avatar where the name will be;
   under it what opens — a channel each, its value hidden */
.bbp-prof-head.is-closed { margin-bottom: 10px; }
.bbp-prof-head.is-closed .bbp-prof-open { height: 42px; padding: 0 22px; font-size: 15px; }
.bbp-prof-opener { margin: 0 60px 18px 0; }
.bbp-prof-have { display: grid; gap: 2px; margin: 0 0 10px; padding: 0; list-style: none; }
.bbp-prof-have li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 0; }
.bbp-prof-have-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; color: #13719f; background: #e8f3f9; border-radius: 50%; }
.bbp-prof-have-t { flex: none; font: 500 14px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.bbp-prof-have-mask { min-width: 0; overflow: hidden; font: 500 13px/1.3 "Inter", system-ui, sans-serif; letter-spacing: .04em; color: #a8a49b; text-overflow: clip; white-space: nowrap; user-select: none; }
.bbp-prof-opener p.bbp-prof-open-note { margin: 0; font: 400 13px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
@media (max-width: 575px) { .bbp-prof-opener { margin-right: 0; } }
html[data-theme="dark"] .bbp-prof-have-t { color: var(--d-text) !important; }
html[data-theme="dark"] .bbp-prof-have-ic { color: #6ab3f3 !important; background: rgba(106, 179, 243, .14) !important; }
html[data-theme="dark"] .bbp-prof-have-mask { color: #5f6f80 !important; }
html[data-theme="dark"] .bbp-prof-opener p.bbp-prof-open-note { color: var(--d-muted) !important; }
/* the countdown at the line's right end, whatever the text going round before it (owner 2026-10-13: «лічильник закріпи справа і щоб
   не залежав від ширини тексту, бо зараз дьоргається») */
.bbp-wait-tail p.bbp-think-line:has(> .bbp-timer) { display: flex !important; align-items: center; gap: 12px; }
.bbp-wait-tail p.bbp-think-line > .bbp-think-text { flex: 0 1 auto; min-width: 0; }
.bbp-wait-tail p.bbp-think-line > .bbp-timer { flex: none; margin-right: auto; }
/* «І до речі… пошир BlaBlaPrice» at the end of the waiting line's message (owner 2026-10-13: «об'єднай ці блоки») */
.popup-container.wide .bbp-wait-tail .bbp-tail-help { margin-top: 16px; }
.popup-container.wide .bbp-wait-tail .bbp-tail-help > p { margin: 0 !important; }
.bbp-tail-help .bbp-soft-btn { margin-top: 10px; }
.bbp-tail-help .bbp-invite-native { display: none !important; }
/* what fits the request and what does not, under each found row (owner 2026-10-13): ✓ green, ✗ red, ? grey — the buyer decides */
.popup-container.wide .bbp-price-list .bbp-price-row p.bbp-price-fit { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0 !important; font: 500 13px/1.4 "Inter", system-ui, sans-serif !important; }
.bbp-price-fit span { display: inline-flex; align-items: baseline; gap: 5px; }
.bbp-price-fit i { font-style: normal; font-weight: 700; }
.bbp-price-fit .is-yes { color: #1e7b3a; }
.bbp-price-fit .is-no { color: #b4443a; }
.bbp-price-fit .is-unknown { color: var(--bbp-muted); }
html[data-theme="dark"] .bbp-price-fit .is-yes { color: #6fd08c !important; }
html[data-theme="dark"] .bbp-price-fit .is-no { color: #f2a493 !important; }
html[data-theme="dark"] .bbp-price-fit .is-unknown { color: var(--d-muted) !important; }
/* ---------- QA round 2026-10-13 (agents): phone and dark ---------- */
/* the light gradients get white letters that can be read (orange, teal were 2:1) */
.bbp-av-1 { background: linear-gradient(-135deg, #f2a23c, #e0782c) !important; }
.bbp-av-4 { background: linear-gradient(-135deg, #22b8a3, #128a7a) !important; }
.bbp-av-1, .bbp-av-4, .bbp-av-1 *, .bbp-av-4 * { color: #fff !important; }
/* dark: the found rows' site line, the waiting line and its note were the light grey on the dark (2.9:1) */
html[data-theme="dark"] .popup-container.wide .bbp-price-list .bbp-price-row p.bbp-price-site,
html[data-theme="dark"] .popup-container.wide .request-body_inner .bbp-wait-tail .blabla-comment .text p.bbp-wait-note,
html[data-theme="dark"] .popup-container.wide .bbp-wait-tail p.bbp-wait-note { color: #9aabbd !important; }
html[data-theme="dark"] .bbp-wait-tail .bbp-think-text { color: #a9b8c8 !important; }
/* the scale: the steps ahead readable (was 2.4:1), the done ones alike, no label running into the next on a phone */
.bbp-journey li.is-todo { color: #7a7f84 !important; }
.bbp-journey li.is-done { color: var(--bbp-ink) !important; }
html[data-theme="dark"] .bbp-journey li.is-todo { color: #8495a7 !important; }
html[data-theme="dark"] .bbp-journey li.is-done { color: #e6ebf0 !important; }
@media (max-width: 575px) {
    .bbp-journey { gap: 6px; }
    .bbp-journey li { font-size: 10.5px !important; overflow-wrap: anywhere; }
}
/* Luna's card on a phone: «‹ Назад» and «питання N» on the first line, the question across the whole card under them */
@media (max-width: 575px) {
    .bbp-lcard[data-flow] .bbp-lcard-head { flex-wrap: wrap; row-gap: 2px; }
    .bbp-lcard[data-flow] .bbp-lcard-head p.bbp-lcard-q { order: 3; flex: 1 0 100%; margin: 2px 0 6px; }
    .bbp-lcard[data-flow] .bbp-lcard-head .bbp-lcard-nav { margin-right: auto; }
}
.bbp-lcard[data-flow] .bbp-lcard-head .bbp-lcard-back { min-height: 36px; }
.bbp-lcard-x, .bbp-prof-x { min-width: 36px; min-height: 36px; }
/* the sort tabs: all three fit a phone */
@media (max-width: 600px) {
    .bbp-web-sort { gap: 2px; }
    .bbp-web-sort button { padding: 7px 9px; font-size: 12px; }
}
/* ---------- QA round 2026-10-13 (agents): guest and buyer ---------- */
/* the pages' one h1 looks like their old h2 */
.page-contact h1.bbp-page-h1 { margin: 0.83em 0; font-family: var(--bbp-serif); font-weight: 600; font-size: 26px; line-height: 1.25; color: var(--bbp-ink); letter-spacing: -0.01em; }
.bbp-agent > h1.heading { display: block !important; margin: 18px 4px 14px !important; padding: 0 !important; font: 500 30px/1.2 var(--bbp-serif) !important; color: var(--bbp-ink) !important; text-align: right !important; text-transform: none !important; letter-spacing: 0 !important; }
/* the header's share card stays on a phone's screen (it ran 116 px off the left edge) */
@media (max-width: 575px) {
    .head-social .wrap.share-chat { max-width: calc(100vw - 32px); left: 16px !important; right: auto !important; }
}
/* the home pitch and the steps under it apart on a desktop */
.bbp-chat .bbp-chat-pitch + .bbp-req-perks.bbp-steps-line { margin-top: 14px !important; }
/* the request menu's line icons are lines */
.bbp-menu-extend svg.bbp-icon { fill: none !important; }
/* the guest's title goes straight on to the steps (no pitch line, owner 2026-10-14) */
.bbp-chat .bbp-chat-title + .bbp-req-perks.bbp-steps-line { margin-top: 16px !important; }
/* «Як на пристрої» on a row of its own on a phone (owner 2026-10-14: the theme follows the device) */
@media (max-width: 575px) { .bbp-theme-pick { flex-wrap: wrap; } .bbp-theme-pick button[data-bbp-theme="auto"] { flex-basis: 100%; } }
/* ---------- the request field under the steps (owner 2026-10-14: «головну і сторінки запиту роби так») ---------- */
.bbp-req-dock.is-inline { position: static !important; z-index: auto; margin: 10px 0 0 !important; padding: 0 !important; background: none !important; }
.bbp-req2 > .bbp-req-intro { flex: none; }
.bbp-req-intro > .bbp-req-dock.is-inline { margin: 10px 0 28px !important; }
.bbp-req2 { min-height: 0 !important; }
/* «Показати приклад» is a plain link over the field, at its text's edge */
.bbp-assist .bbp-example-toggle, .bbp-req-intro > .bbp-example-toggle {
    height: auto !important; margin: 26px 18px 0 0 !important; padding: 4px 0 !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
/* the steps a little apart from the title */
.bbp-chat .bbp-chat-title + .bbp-req-perks.bbp-steps-line { margin-top: 22px !important; }
/* «Ти продавець?» under the field */
.bbp-assist-chat .bbp-assist-seller.bbp-assist-seller-under { display: inline-block; margin: 14px 12px 0 0 !important; }
/* ---------- BlaBlaPrice's notes at the end of «Мої запити» (owner 2026-10-14) ---------- */
/* a row like the requests' ones (they are .open-popup, these open a static window) */
#main .request.bbp-row.bbp-note-row {
    display: flex !important; align-items: center; gap: 12px; min-height: 0 !important; margin: 2px 0 0 !important; padding: 9px 12px !important;
    background: transparent !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important;
    transform: none !important; overflow: visible !important; cursor: pointer;
}
#main .request.bbp-row.bbp-note-row::before, #main .request.bbp-row.bbp-note-row::after { display: none !important; }
#main .request.bbp-row.bbp-note-row:hover { background: #f0f2f5 !important; }
html[data-theme="dark"] #main .request.bbp-row.bbp-note-row:hover { background: #202b36 !important; }
#main .request.open-popup.bbp-row + .request.bbp-row.bbp-note-row { margin-top: 12px !important; }
@media (max-width: 991px) { #main .request.bbp-row.bbp-note-row { padding: 8px 10px !important; } }
.bbp-note-row .bbp-row-main { min-width: 0; flex: 1; }
.bbp-row-av.bbp-row-av-bbp { background: none; }
.bbp-row-av.bbp-row-av-bbp img { width: 100%; height: 100%; display: block; }
.bbp-note-row .bbp-row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbp-note-pop .popup-container { max-width: 460px; }
.bbp-note-pop-body { display: flex; gap: 14px; align-items: flex-start; padding: 6px 4px 4px; }
.bbp-note-pop-av { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.bbp-note-pop-from { margin: 2px 0 2px; font: 600 13px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
.bbp-note-pop-title { margin: 0 0 8px; font: 600 18px/1.35 var(--bbp-serif); color: var(--bbp-ink); }
.bbp-note-pop-text { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--bbp-ink); }
.bbp-note-pop-btn, .bbp-note-pop-btn:hover { display: inline-flex; color: #fff !important; background: #229ed9 !important; }
/* ---------- the category page: the field at the screen's top while the article is read (owner 2026-10-14) ---------- */
.bbp-req-intro > .bbp-req-dock.is-inline.is-stuck {
    position: fixed !important; bottom: auto !important; z-index: 45; margin: 0 !important; padding: 8px 0 12px !important;
    background: linear-gradient(var(--bbp-dock-bg) 78%, transparent) !important;
}
.bbp-req-dock.is-stuck .bbp-suggest, .bbp-req-dock.is-stuck .bbp-composer-opts { display: none !important; }
.bbp-req-dock.is-stuck .bbp-composer-text { min-height: 44px !important; }
/* the category page's field without the category button (owner 2026-10-14): its hidden fields only */
.bbp-req-dock .bbp-composer-opts.is-hidden-opts { display: none !important; }
/* ---------- the found prices as cards (owner 2026-10-14, a picture) ---------- */
.bbp-price-list:has(> .bbp-price-row.is-card) { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bbp-price-list .bbp-price-row.is-card {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
    margin: 0; padding: 12px 12px 12px 16px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 14px;
}
.bbp-price-list .bbp-price-row.is-card[hidden] { display: none !important; }
.bbp-price-row.is-card > .bbp-price-av { grid-column: 1; display: inline-flex; }
.bbp-price-row.is-card .bbp-price-av .bbp-av { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; overflow: hidden; color: #fff; font: 700 13px/1 "Inter", system-ui, sans-serif; border-radius: 50%; }
.bbp-price-row.is-card .bbp-price-av .bbp-av img { width: 100%; height: 100%; object-fit: cover; }
.bbp-price-row.is-card > .bbp-price-info { grid-column: 2; min-width: 0; }
.bbp-price-row.is-card .bbp-price-title {
    display: block; max-width: 100%; margin: 0; padding: 0; overflow: hidden; font: 400 19px/1.3 "Inter", system-ui, sans-serif;
    color: #1a0dab; text-align: right; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0;
}
.bbp-price-row.is-card span.bbp-price-title { color: var(--bbp-ink); }
.bbp-price-row.is-card button.bbp-price-title { cursor: pointer; }
.bbp-price-row.is-card button.bbp-price-title:hover { text-decoration: underline; }
.bbp-price-row.is-card button.bbp-price-title:focus-visible { outline: 2px solid #1a7cad; outline-offset: 2px; border-radius: 4px; }
.popup-container.wide .bbp-price-list .bbp-price-row.is-card p.bbp-price-fit { margin: 4px 0 0 !important; }
.popup-container.wide .bbp-price-list .bbp-price-row.is-card p.bbp-price-similar { margin: 4px 0 0 !important; }
.bbp-price-row.is-card > .bbp-price-sum { grid-column: 3; align-self: start; padding-top: 1px; font: 700 17px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); white-space: nowrap; }
.bbp-price-row.is-card > .bbp-price-sum.is-none { font-weight: 600; font-size: 14px; color: var(--bbp-muted); }
.bbp-price-row.is-card > .bbp-offer-contacts { grid-column: 1 / -1; margin: 10px 0 0; }
.bbp-price-list .bbp-price-row.is-card.is-open { background: #eef6fc; border-color: #cfe6f5; }
@media (max-width: 575px) {
    .bbp-price-list .bbp-price-row.is-card { column-gap: 10px; padding: 10px 10px 10px 12px; }
    .bbp-price-row.is-card .bbp-price-av .bbp-av { width: 30px; height: 30px; font-size: 12px; }
    .bbp-price-row.is-card .bbp-price-title { font-size: 16px; }
    .bbp-price-row.is-card > .bbp-price-sum { font-size: 15px; }
}
/* a phone: the title (two lines) and the price on the first line, what fits under both across the card */
@media (max-width: 575px) {
    .bbp-price-list .bbp-price-row.is-card { align-items: start; row-gap: 0; }
    .bbp-price-row.is-card > .bbp-price-info { display: contents; }
    .bbp-price-row.is-card > .bbp-price-av { grid-column: 1; grid-row: 1 / span 2; }
    .bbp-price-row.is-card .bbp-price-info > .bbp-price-title { grid-column: 2; grid-row: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .bbp-price-row.is-card > .bbp-price-sum { grid-column: 3; grid-row: 1; }
    .bbp-price-row.is-card .bbp-price-info > p { grid-column: 2 / -1; grid-row: 2; }
}

/* =====================================================================
 * Telegram-like chat wallpaper in the request popups (owner 2026-10-15: «тримаємось стилю телеграму … у попапах бекграунд
 * з іконок як в мессенджерах … ікону категорії і бекграунд до категорії»): a soft gradient per section (data-wall), the
 * category's doodles as a mask (--wall-img, site/wall), everybody's messages in bubbles. Under html.tg-wall while it is checked.
 * ===================================================================== */
[data-wall="sky"]      { --w0: #cfe5f4; --w1: #a8d2ef; --w2: #e6f2fa; --w3: #8fc2e7; --w4: #d3ebe6; --wall-ink: rgba(30, 92, 140, .2);  --wall-pill: rgba(36, 92, 136, .58); }
[data-wall="mint"]     { --w0: #d2ede0; --w1: #afdfc4; --w2: #e9f6ee; --w3: #95d2b0; --w4: #dcefca; --wall-ink: rgba(28, 108, 70, .2);  --wall-pill: rgba(36, 104, 72, .58); }
[data-wall="sand"]     { --w0: #f3e2c2; --w1: #edcd95; --w2: #f9efdb; --w3: #e4ba7f; --w4: #f2dcb6; --wall-ink: rgba(136, 88, 22, .2);  --wall-pill: rgba(124, 86, 32, .6); }
[data-wall="leaf"]     { --w0: #dce5bd; --w1: #bad490; --w2: #eef0d2; --w3: #9dc380; --w4: #d6d98f; --wall-ink: rgba(58, 98, 30, .22); --wall-pill: rgba(66, 100, 44, .6); }
[data-wall="pink"]     { --w0: #f6dae4; --w1: #f0b9cd; --w2: #fbebf1; --w3: #ea9fbd; --w4: #f5d6ca; --wall-ink: rgba(146, 40, 88, .17); --wall-pill: rgba(140, 52, 92, .58); }
[data-wall="lavender"] { --w0: #dfddf5; --w1: #c4c0ee; --w2: #f0effb; --w3: #aba5e5; --w4: #d9e3f5; --wall-ink: rgba(68, 58, 148, .19); --wall-pill: rgba(76, 68, 146, .58); }
[data-wall="wheat"]    { --w0: #efe4d0; --w1: #e2caa3; --w2: #f7f1e4; --w3: #d7b686; --w4: #ece1c1; --wall-ink: rgba(118, 84, 34, .2);  --wall-pill: rgba(114, 86, 44, .6); }
[data-wall="steel"]    { --w0: #d6e4ec; --w1: #b6cedd; --w2: #e9f1f5; --w3: #9dbcd1; --w4: #d9e7e3; --wall-ink: rgba(38, 78, 108, .2);  --wall-pill: rgba(44, 82, 112, .58); }
[data-wall="peach"]    { --w0: #f6ded6; --w1: #f1c1b3; --w2: #fbeee9; --w3: #eaa795; --w4: #f5e1c9; --wall-ink: rgba(146, 68, 48, .18); --wall-pill: rgba(142, 76, 58, .58); }
[data-wall="teal"]     { --w0: #d0ecea; --w1: #a6dcd8; --w2: #e7f6f4; --w3: #87cdc8; --w4: #d5ebd9; --wall-ink: rgba(18, 106, 100, .2);  --wall-pill: rgba(24, 100, 96, .58); }
[data-wall="orchid"]   { --w0: #ebd9f1; --w1: #dcbae8; --w2: #f6ecf8; --w3: #cd9fdd; --w4: #edd9eb; --wall-ink: rgba(108, 48, 138, .18); --wall-pill: rgba(110, 58, 134, .58); }
[data-wall="green"]    { --w0: #d7eed8; --w1: #b5e0b9; --w2: #ecf7ed; --w3: #98d29f; --w4: #e1efca; --wall-ink: rgba(38, 112, 48, .2);  --wall-pill: rgba(44, 106, 54, .58); }

.tg-wall .popup-container.wide[data-wall] { isolation: isolate; }
/* the old cream backgrounds are !important, so are these (light theme; dark.css has its own) */
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] {
    background-color: var(--w0) !important;
    background-image:
        radial-gradient(circle at 10% 16%, var(--w1) 0, transparent 46%),
        radial-gradient(circle at 90% 10%, var(--w2) 0, transparent 44%),
        radial-gradient(circle at 84% 88%, var(--w3) 0, transparent 50%),
        radial-gradient(circle at 14% 86%, var(--w4) 0, transparent 46%);
}
/* the doodles: the tile is a mask, the ink its colour */
.tg-wall .popup-container.wide[data-wall]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--wall-ink);
    -webkit-mask: var(--wall-img) 0 0 / 292px 292px repeat;
    mask: var(--wall-img) 0 0 / 292px 292px repeat;
}
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .request-body,
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .tabs-block { background: transparent !important; }
/* the head and the field stay solid, like Telegram's bars */
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .request-head { background: #fff !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .request-foot { background: transparent !important; }
/* the steps bar under the head: a white strip like a pinned message */
.tg-wall .popup-container.wide[data-wall] .bbp-pop-journey {
    background: rgba(255, 255, 255, .92);
    border-radius: 14px;
    padding: 2px 14px 10px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.tg-wall .popup-container.wide[data-wall] .bbp-pop-journey .bbp-journey { margin: 4px 0 0 !important; }
/* service lines («Шукаємо продавців»): white text on a tinted pill */
html.tg-wall .popup-content .popup-container.wide[data-wall] .request-body .request-info {
    background: var(--wall-pill) !important;
    color: #fff !important;
    font-weight: 500;
}
/* the buyer's own message: Telegram's light green (or the chosen theme's colour, --tg-out), a tail at the bottom right */
.tg-wall .popup-container.wide[data-wall] .request-body .text-right .message .inner {
    background: var(--tg-out, #e3fbd1);
    color: #0f1419;
    border-radius: 16px 16px 16px 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* BlaBlaPrice's messages: white bubbles, a tail at the bottom left of the first one */
/* (the plain-prose look sets these transparent !important, so the bubble is !important too) */
.tg-wall .popup-container.wide[data-wall] .blabla-comment > .text,
.tg-wall .popup-container.wide[data-wall] .bbp-assist > .blabla-comment > .text {
    background: #fff !important;
    border-radius: 16px;
    padding: 10px 14px 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.tg-wall .popup-container.wide[data-wall] .blabla-comment.first > .text { border-top-right-radius: 4px; }
.tg-wall .popup-container.wide[data-wall] .blabla-comment + .blabla-comment { margin-top: 6px; }
/* the time and «як його бачать продавці ›» go inside the own bubble, like Telegram's time (not under it on the pattern) */
.tg-wall .popup-container.wide[data-wall] .request-body .text-right .message .inner .date {
    position: static;
    display: block;
    margin-top: 6px;
    text-align: left;
    white-space: normal;
    color: rgba(46, 110, 40, .8);
}
/* phones: the five steps keep one line */
@media (max-width: 600px) {
    .tg-wall .popup-container.wide[data-wall] .bbp-pop-journey { padding-right: 8px; padding-left: 8px; }
    .tg-wall .popup-container.wide[data-wall] .bbp-pop-journey .bbp-journey li { font-size: 12px; letter-spacing: -.01em; }
}
/* the own bubble: no room kept under it for the time (it is inside now), and no wider than Telegram's on a phone */
.tg-wall .popup-container.wide[data-wall] .request-body .text-right .message .inner { margin-bottom: 10px; }
.tg-wall .popup-container.wide[data-wall] .request-body .text-right .message .inner .date { margin-top: 6px !important; }
@media (max-width: 600px) {
    .tg-wall .popup-container.wide[data-wall] .request-body .text-right .message { padding-right: 44px !important; }
}
.tg-wall .popup-container.wide[data-wall] .request-body .text-right .message .box { min-width: 0; max-width: 100%; }
.tg-wall .popup-container.wide[data-wall] .request-body .text-right .message .inner .date,
.tg-wall .popup-container.wide[data-wall] .request-body .text-right .message .inner .date * { white-space: normal !important; max-width: 100%; width: auto !important; min-width: 0 !important; }

/* Luna's card as a Telegram bot message with buttons inside (owner's references 2026-10-15): the answers are light-blue rounded
   buttons with blue text, two in a row when they fit; no numbers (the keys 1–9 still work) */
.tg-wall .popup-container.wide[data-wall] .bbp-lcard { border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .14); padding: 10px 14px 10px 10px; }
.tg-wall .popup-container.wide[data-wall] .bbp-lcard-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px; }
.tg-wall .popup-container.wide[data-wall] .bbp-lcard-opts > li { flex: 1 1 auto; min-width: calc(50% - 3px); border-top: 0; }
.tg-wall .popup-container.wide[data-wall] .bbp-lcard-opt {
    justify-content: center;
    min-height: 42px;
    padding: 9px 12px;
    font-weight: 600;
    color: #229ed9;
    text-align: center;
    background: #e8f2fb;
    border-radius: 10px;
}
.tg-wall .popup-container.wide[data-wall] .bbp-lcard-opt:active { background: #d7e8f8; }
.tg-wall .popup-container.wide[data-wall] .bbp-lcard-n { display: none; }
.tg-wall .popup-container.wide[data-wall] .bbp-lcard-t { flex: 0 1 auto; }
.tg-wall .popup-container.wide[data-wall] .bbp-lcard-t small { color: #4c6b85; }
.tg-wall .popup-container.wide[data-wall] .bbp-lcard p.bbp-lcard-src,
.tg-wall .popup-container.wide[data-wall] .bbp-lcard p.bbp-lcard-foot { margin-right: 0; padding-right: 0; }
/* «Свій варіант»: a light field under the buttons */
.tg-wall .popup-container.wide[data-wall] .bbp-lcard-own { margin-top: 6px; padding: 2px 12px 2px 6px; border-top: 0; background: #f2f5f8; border-radius: 10px; }

/* the company's profile window as Telegram's profile (owner 2026-10-15: «профіль компанії в такому стилі»): a gradient head with
   white doodles, a big round avatar and the name in white, then white groups on Telegram's grey, contacts as rows with coloured
   square icons */
.tg-wall .bbp-prof-card { padding: 0 0 14px; background: #f1f2f6; }
.tg-wall .bbp-prof-x { z-index: 2; top: 12px; left: 12px; color: #fff; background: rgba(255, 255, 255, .2); }
.tg-wall .bbp-prof-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
    padding: 30px 20px 22px;
    text-align: center;
    color: #fff;
    background: #25a3e1;
}
.tg-wall .bbp-prof-head::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .17);
    -webkit-mask: var(--wall-img) 0 0 / 237px 237px repeat;
    mask: var(--wall-img) 0 0 / 237px 237px repeat;
}
/* the ring as the open chat's avatar in the list (owner 2026-10-19: «зроби такий самий ободок як в меню навколо аватарки») */
.tg-wall .bbp-prof-av .bbp-av { width: 92px; height: 92px; font-size: 34px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.tg-wall .bbp-prof-who { display: flex; flex-direction: column; align-items: center; }
.tg-wall .bbp-prof-name { font-size: 22px; color: #fff; }
.tg-wall .bbp-prof-line, .tg-wall .bbp-prof-rate { color: rgba(255, 255, 255, .9); }
.tg-wall .bbp-prof-head .bbp-prof-open { color: #1a6fb0; background: #fff; border: 0; }
/* the groups */
.tg-wall .bbp-prof > :not(.bbp-prof-head) { margin-right: 12px; margin-left: 12px; }
.tg-wall .bbp-prof-about,
.tg-wall .bbp-prof-opener,
.tg-wall .bbp-prof-contacts .bbp-offer-contacts,
.tg-wall .bbp-prof-contacts > .bbp-contact-links,
.tg-wall .bbp-prof-reviews { padding: 6px 14px 8px; background: #fff; border: 0; border-radius: 12px; }
.tg-wall .bbp-prof-contacts:empty { display: none; }
.tg-wall .bbp-prof-title { margin: 4px 0 2px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #6d7883; }
.tg-wall .bbp-prof-rv { border-top-color: #eceef1; }
.tg-wall .bbp-prof-claim { border-top: 0; text-align: center; }
/* contact rows: a coloured square, the value, a hairline */
.tg-wall .bbp-prof .bbp-contact-links { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0 !important; margin: 0 !important; position: relative; }
.tg-wall .bbp-prof .bbp-contact-btn { display: flex; align-items: center; gap: 12px; height: auto; min-height: 46px; padding: 6px 0 6px 44px !important; font-size: 15px; color: #0f1419; border-bottom: 1px solid #eceef1 !important; border-radius: 0; }
.tg-wall .bbp-prof .bbp-contact-btn:last-of-type { border-bottom: 0 !important; }
.tg-wall .bbp-prof .bbp-contact-btn .bbp-icon,
.tg-wall .bbp-prof .bbp-contact-btn svg { box-sizing: content-box; flex: none; width: 18px; height: 18px; padding: 6px; color: #fff; background: #34c759; border-radius: 8px; }
.tg-wall .bbp-prof .bbp-contact-btn.is-email svg { background: #3390ec; }
.tg-wall .bbp-prof .bbp-contact-btn.is-telegram svg { background: #229ed9; }
.tg-wall .bbp-prof .bbp-contact-btn.is-whatsapp svg { background: #25b864; }
.tg-wall .bbp-prof .bbp-contact-btn.is-viber svg { background: #7360f2; }
.tg-wall .bbp-prof .bbp-contact-btn:is(.is-site, .is-web, .is-url) svg { background: #f2994a; }
.tg-wall .bbp-prof .bbp-contact-copy { position: absolute; top: 5px; left: 0; }
.tg-wall .bbp-prof-x:focus { outline: 0; box-shadow: none; }
.tg-wall .bbp-prof-x:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }

/* a company's page (user-offer, company): its card as Telegram's profile head — the gradient, the category's doodles in white, a
   big avatar, the name in white */
.bbp-company-av { display: none; }
.tg-wall .popup-container.wide[data-wall] .bbp-company-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 24px 16px 18px;
    text-align: center;
    background: #25a3e1;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.tg-wall .popup-container.wide[data-wall] .bbp-company-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .17);
    -webkit-mask: var(--wall-img) 0 0 / 237px 237px repeat;
    mask: var(--wall-img) 0 0 / 237px 237px repeat;
}
.tg-wall .popup-container.wide[data-wall] .bbp-company-av { display: flex; justify-content: center; margin: 0 0 10px; }
.tg-wall .popup-container.wide[data-wall] .bbp-company-av .bbp-av {
    display: flex; align-items: center; justify-content: center; overflow: hidden; width: 84px; height: 84px;
    font: 600 32px/1 "Inter", system-ui, sans-serif; color: #fff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
}
.tg-wall .popup-container.wide[data-wall] .bbp-company-av .bbp-av img { width: 100%; height: 100%; object-fit: cover; }
.tg-wall .popup-container.wide[data-wall] .bbp-company-card :is(.bbp-company-name, .bbp-company-kind, .bbp-company-line, .bbp-company-note) { color: #fff; }
.tg-wall .popup-container.wide[data-wall] .bbp-company-card .bbp-company-name { font-size: 21px; }
.tg-wall .popup-container.wide[data-wall] .bbp-company-card :is(.bbp-company-kind, .bbp-company-line) { opacity: .9; }
.tg-wall .popup-container.wide[data-wall] .bbp-company-block { border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
/* the field's dock shows the wallpaper under it, like Telegram's message bar */
.tg-wall .popup-container.wide[data-wall] .bbp-req-dock { background: transparent !important; }
.tg-wall .popup-container.wide[data-wall] .bbp-req-dock .bbp-lcard::after { display: none; }
/* phones: a step's long name («2 пропозиції») stays on one line */
@media (max-width: 600px) {
    .tg-wall .popup-container.wide[data-wall] .bbp-pop-journey .bbp-journey li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* the other side's messages (a seller's offer, contacts, the deal chat): white bubbles on the left, a tail at the top left */
.tg-wall .popup-container.wide[data-wall] .request-body :not(.text-right) > .message > .box > .inner {
    padding: 8px 12px 10px;
    background: #fff !important;
    border-radius: 16px 4px 16px 16px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.tg-wall .popup-container.wide[data-wall] .request-body :not(.text-right) > .message > .box { align-items: flex-end; gap: 8px; }
/* the tabs under the chat (the review, a complaint, «Поділися»): white cards, not a cream panel */
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .tab-entry { background: transparent !important; }
.tg-wall .popup-container.wide[data-wall] .tab-entry:not(.tab-answer) .request-foot {
    margin: 0 12px 12px;
    padding: 12px 14px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .tab-entry:not(.tab-answer) .request-foot { background: #fff !important; }
/* the field (tab-answer) floats on the wallpaper, like Telegram's */
.tg-wall .popup-container.wide[data-wall] .tab-answer .request-foot { box-shadow: none; border: 0; }
/* «Після обміну контактами ти отримаєш»: a service line on a tinted pill, the channels in it */
.tg-wall .popup-container.wide[data-wall] .bbp-buyer-channels {
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 12px auto 6px;
    padding: 6px 12px 8px;
    color: #fff;
    background: var(--wall-pill);
    border-radius: 14px;
}
.tg-wall .popup-container.wide[data-wall] .bbp-bc-lead { text-align: center; font-weight: 500; }
.tg-wall .popup-container.wide[data-wall] .bbp-bc-chip { height: 24px; color: #fff !important; background: rgba(255, 255, 255, .2) !important; }
.tg-wall .popup-container.wide[data-wall] .bbp-bc-chip .bbp-icon { color: #fff !important; }
/* the deal chat's hints under the messages: service pills too */
.tg-wall .popup-container.wide[data-wall] .bbp-deal.is-chat :is(p.bbp-deal-hint, p.bbp-deal-note) {
    width: fit-content;
    max-width: calc(100% - 24px);
    margin-right: auto;
    margin-left: auto;
    padding: 5px 12px;
    color: #fff;
    background: var(--wall-pill);
    border-radius: 14px;
}
/* the chat with a seller: a round send button with the plane, as in the seller's field (was the «Оновити» text button's look) */
.bbp-deal-dock.bbp-popup-edit .bbp-composer:not(#bbp-none) .bbp-composer-send button.bbp-update-btn {
    width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important;
    color: #fff !important; background: #229ed9 !important; border-radius: 50% !important; box-shadow: none !important;
}
.bbp-deal-dock .bbp-update-btn .bbp-icon { width: 19px; height: 19px; margin-right: -1px; color: #fff; }
.bbp-deal-dock .bbp-update-btn.is-loading .bbp-icon { display: none; }
/* the chat with a seller in the Telegram look: «Твій запит» a service pill, the request your green bubble, the seller's offer
   a white bubble on the left, «Додати в запит для всіх» a small pill; no cream fade over the field */
.tg-wall .popup-container.wide[data-wall] .bbp-chat-req > .bbp-chat-label {
    align-self: center;
    margin: 0 0 10px;
    padding: 4px 12px;
    font-weight: 500;
    color: #fff !important;
    background: var(--wall-pill);
    border-radius: 14px;
}
html.tg-wall:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-chat-bubble { background: var(--tg-out, #e3fbd1) !important; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.tg-wall .popup-container.wide[data-wall] .bbp-chat-bubble { border-radius: 16px 16px 16px 4px; }
.tg-wall .popup-container.wide[data-wall] .bbp-chat-offer {
    max-width: 640px;
    background: #fff;
    border: 0 !important;
    border-radius: 16px 4px 16px 16px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.tg-wall .popup-container.wide[data-wall] .bbp-chat-offer .bbp-offer-contacts { border: 0; }
.tg-wall .popup-container.wide[data-wall] .bbp-chat-myreview { border: 0 !important; border-radius: 16px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.tg-wall .popup-container.wide[data-wall] :is(.bbp-dm-share, .bbp-dm-shared) {
    width: fit-content;
    padding: 3px 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: #fff !important;
    background: var(--wall-pill);
    border-radius: 12px;
}
.tg-wall .popup-container.wide[data-wall] .bbp-dmsg.is-mine > :is(.bbp-dm-share, .bbp-dm-shared) { margin-top: 6px; margin-left: 0; }
.tg-wall .popup-container.wide[data-wall] .bbp-req-dock .bbp-composer::before { display: none; }
html.tg-wall .popup-container.wide[data-wall] .bbp-req-dock.is-fixed:has(.bbp-lcard:not([hidden])) { background: none !important; }
/* «Поділися BlaBlaPrice» in its card: compact, the buttons as Telegram's inline buttons (like Luna's card) — the card covers less of the chat */
.tg-wall .popup-container.wide[data-wall] .tab-share .share-chat { padding: 0 !important; }
.tg-wall .popup-container.wide[data-wall] .tab-share .share-chat p { margin: 0 0 8px; }
.tg-wall .popup-container.wide[data-wall] .tab-share .share-chat .share-button {
    margin: 3px !important;
    padding: 8px 12px;
    color: #1a6fb0 !important;
    background: #e8f2fb !important;
    border: 0 !important;
    border-radius: 10px;
}

/* ---------- the pack's window before LiqPay and «Мої оплати» (owner 2026-10-20: «галочка і необовязкове поле податковий номер»):
   a bottom sheet on a phone, a card in the middle on a computer, as the chat theme's sheet ---------- */
button.bbp-plan-btn { font-family: inherit; }
html.bbp-pay-open, html.bbp-pay-open body { overflow: hidden; }
.bbp-pay-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; background: rgba(11, 20, 26, .28); }
.bbp-pay-sheet[hidden] { display: none; }
.bbp-pay-box {
    box-sizing: border-box; width: 100%; max-width: 460px; max-height: 92vh; overflow: auto; margin: 0; padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
    font: 400 15px/1.45 "Inter", system-ui, sans-serif; color: #111b21; background: #fff; border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(11, 20, 26, .18); animation: bbp-sheet-up .22s ease-out;
}
@media (min-width: 768px) {
    .bbp-pay-sheet { align-items: center; }
    .bbp-pay-box { border-radius: 20px; box-shadow: 0 12px 40px rgba(11, 20, 26, .22); }
}
@media (prefers-reduced-motion: reduce) { .bbp-pay-box { animation: none; } }
.bbp-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bbp-pay-head h2 { margin: 0; font: 600 18px/1.3 "Inter", system-ui, sans-serif; color: #111b21; }
.bbp-pay-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; margin-left: -6px; padding: 0; color: #54656f; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-pay-x:hover { background: #f0f2f5; }
.bbp-pay-what { margin: 4px 0 0; color: #54656f; }
.bbp-pay-sum { margin: 2px 0 0; color: #111b21; }
.bbp-pay-sum b { font-size: 20px; }
.bbp-pay-hint { margin: 8px 0 0; font-size: 13px; color: #667781; }
.bbp-pay-hint a { color: #1a7cad; }
.bbp-pay-check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px; font-weight: 500; background: #f0f2f5; border-radius: 12px; cursor: pointer; }
.bbp-pay-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #229ed9; cursor: pointer; }
.bbp-pay-field { display: block; margin: 14px 0 0; font-size: 14px; font-weight: 500; }
.bbp-pay-field small { font-weight: 400; color: #667781; }
.bbp-pay-field input {
    box-sizing: border-box; display: block; width: 100%; margin: 6px 0 0; padding: 11px 12px; font: 400 16px/1.3 "Inter", system-ui, sans-serif; color: #111b21;
    background: #fff; border: 1px solid #d1d7db; border-radius: 10px; outline: none;
}
.bbp-pay-field input:focus { border-color: #229ed9; box-shadow: 0 0 0 3px rgba(34, 158, 217, .18); }
.bbp-pay-go { display: flex; justify-content: center; width: 100%; margin: 16px 0 0; color: #fff; background: #229ed9; }
.bbp-pay-go:hover { color: #fff; background: #1a8fc6; }
.bbp-pay-go:disabled { opacity: .6; cursor: progress; }
/* «Мої оплати» on the balance page */
.bbp-pay-orders { margin-top: 8px; }
.bbp-pay-list { display: grid; gap: 8px; }
.bbp-pay-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 12px 14px; font-size: 14px; background: #fff; border: 1px solid var(--bbp-line); border-radius: 12px; }
.bbp-pay-date { color: #667781; white-space: nowrap; }
.bbp-pay-amt { font-weight: 600; white-space: nowrap; }
.bbp-pay-act { color: #1a7cad; font-weight: 500; white-space: nowrap; }
.bbp-pay-st { color: #667781; white-space: nowrap; }
@media (max-width: 575px) {
    .bbp-pay-row { grid-template-columns: 1fr auto; row-gap: 4px; }
    .bbp-pay-what { grid-column: 1; }
}

/* =====================================================================
 * Telegram iOS «liquid glass» (owner 2026-10-15: «проаналізуй в інтернеті новий стиль телеграм для ios і зроби схоже»).
 * Telegram 12–13 for iOS turned its solid bars into separate floating pieces of glass: a round «back», the chat's name in a
 * capsule, round buttons; the field a glass capsule between a round attach and a round send; menus and cards of frosted glass.
 * Frosted rather than clear: the readers complained the clear glass is hard to read, and iOS 27 made it more opaque too.
 * Under html.tg-glass: on for everyone since 2026-10-15 (owner: «вмикай цю тему по замовчуванню»), ?glass=0 turns it off in a browser.
 * ===================================================================== */
html.tg-glass {
    --glass-bg: rgba(255, 255, 255, .72);
    --glass-bg-strong: rgba(255, 255, 255, .86);
    --glass-blur: blur(18px) saturate(180%);
    --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .65);
    --glass-shadow: 0 1px 2px rgba(16, 38, 64, .08), 0 6px 18px rgba(16, 38, 64, .12);
    --glass-tint: rgba(34, 158, 217, .1);
}
@media (prefers-reduced-transparency: reduce) {
    html.tg-glass { --glass-bg: rgba(255, 255, 255, .97); --glass-bg-strong: #fff; }
}

/* the popup's head: no bar — its pieces float over the wallpaper */
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head {
    display: flex; align-items: center; min-height: 62px; padding: 9px 12px !important;
    background: transparent !important; box-shadow: none !important; border: 0 !important;
}
/* the name (with the avatar and the status line) in a capsule */
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head > div:first-child {
    position: relative; flex: 0 1 auto !important; display: flex; flex-direction: column; justify-content: center; gap: 0;
    box-sizing: border-box; min-width: 0; max-width: calc(100% - 104px); min-height: 44px; margin: 0 52px 0 0 !important; padding: 4px 16px 5px 18px !important;
    background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-radius: 22px; box-shadow: var(--glass-rim), var(--glass-shadow);
}
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head.has-av > .bbp-head-av-row { flex-direction: row; align-items: center; gap: 9px; padding-right: 4px !important; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head > div.d-flex:first-child { flex-direction: row; align-items: center; gap: 9px; padding-right: 4px !important; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head .bbp-head-av .bbp-row-av,
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head .bbp-chat-av .bbp-av { width: 36px !important; height: 36px !important; font-size: 14px; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head .bbp-head-av .bbp-row-av svg { width: 18px; height: 18px; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head .title { margin: 0 !important; font-size: 16px; line-height: 1.25; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head .from { margin: 1px 0 0 !important; font-size: 12.5px; line-height: 1.3; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head .title:has(.bbp-head-icon) ~ .from { margin-right: 24px !important; }
/* «back»: a round piece of glass left of the capsule */
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head > div:first-child .bbp-head-back,
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head > .d-flex > svg:first-child {
    position: absolute !important; right: -52px !important; top: 50% !important; transform: translateY(-50%) !important;
    box-sizing: border-box; width: 44px !important; min-width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; color: var(--bbp-ink);
    background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 0 !important; border-radius: 50% !important; box-shadow: var(--glass-rim), var(--glass-shadow);
}
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head > .d-flex > svg:first-child { padding: 16px 12px; overflow: visible; }
/* «⋯»: round glass on the right */
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .drop-menu.bbp-head-menu { left: 12px !important; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .drop-menu.bbp-head-menu > a {
    width: 44px; height: 44px;
    background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 0 !important; box-shadow: var(--glass-rim), var(--glass-shadow);
}
/* its menu: frosted glass */
html.tg-glass .drop-menu.bbp-head-menu .drop {
    top: calc(100% + 8px); min-width: 230px; padding: 6px !important; overflow: hidden;
    background: var(--glass-bg-strong) !important; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    border: 0 !important; border-radius: 18px !important; box-shadow: var(--glass-rim), 0 12px 40px rgba(16, 38, 64, .22) !important;
}
html.tg-glass .drop-menu.bbp-head-menu .drop > li > :is(a, button),
html.tg-glass .drop-menu.bbp-head-menu .drop > li > form > button { border-radius: 12px !important; }
/* the head floats over the talk (owner 2026-10-16: «ховай хмаринки лише під хедером попапу, а не під фоном»): the talk scrolls under
   it and shows between its pieces, hidden only behind the glass ones; the empty part of the head lets clicks through */
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] { position: relative; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] > .request-head { position: absolute !important; top: 0; right: 0; left: 0; z-index: 30; pointer-events: none; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] > .request-head > * { pointer-events: auto; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] > .request-body { padding-top: 62px !important; }
/* the steps strip, Luna's card, the cards under the chat: frosted glass */
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .bbp-pop-journey { background: var(--glass-bg-strong) !important; box-shadow: var(--glass-rim), var(--glass-shadow) !important; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .bbp-lcard {
    background: rgb(229 237 246 / 85%) !important; /* the owner's colour (2026-10-19, css.txt) */ -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    border-radius: 22px !important; box-shadow: var(--glass-rim), 0 8px 28px rgba(16, 38, 64, .16) !important;
}
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .bbp-lcard-opt { background: #ffffff99 !important; border-radius: 14px !important; }
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .tab-entry:not(.tab-answer) .request-foot {
    background: var(--glass-bg-strong) !important; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    border-radius: 22px; box-shadow: var(--glass-rim), var(--glass-shadow) !important;
}
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .tab-share .share-chat .share-button { background: var(--glass-tint) !important; border-radius: 14px; }

/* the field: a glass capsule, the photo and the send as round pieces beside it (Telegram's attach · field · send) */
html.tg-glass :is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) {
    position: relative; box-sizing: border-box; min-height: 46px; margin-right: 54px !important; margin-left: 54px !important; padding: 1px 16px !important;
    background: var(--glass-bg-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 0 !important; border-radius: 23px !important; box-shadow: var(--glass-rim), var(--glass-shadow) !important;
}
html.tg-glass :is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none):not(:has(.bbp-req-photo)) { margin-right: 0 !important; }
html.tg-glass :is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none):focus-within { box-shadow: var(--glass-rim), 0 0 0 2px rgba(34, 158, 217, .35), var(--glass-shadow) !important; }
html.tg-glass :is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) textarea { flex: 1 1 100% !important; padding: 12px 0 !important; background: transparent !important; }
html.tg-glass :is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) .bbp-req-photo { position: absolute !important; right: -54px; bottom: 1px; margin: 0 !important; }
html.tg-glass :is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) .bbp-req-photo-add {
    width: 44px !important; height: 44px !important; color: var(--bbp-ink);
    background-color: var(--glass-bg-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 0 !important; border-radius: 50% !important; box-shadow: var(--glass-rim), var(--glass-shadow) !important;
}
html.tg-glass :is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) .bbp-composer-send { position: absolute !important; left: -54px; bottom: 1px; }
html.tg-glass :is(.bbp-list-dock, .bbp-popup-edit) .bbp-composer:not(#bbp-none) .bbp-composer-send :is(button, .bbp-btn-primary) {
    width: 44px !important; min-width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important;
    color: #fff !important; background: #229ed9 !important; border-radius: 50% !important; box-shadow: 0 4px 14px rgba(34, 158, 217, .35) !important;
}
/* the seller's field: the same three pieces, centred under the talk's column (QA 2026-10-16: on a wide screen it stood on the left) */
html.tg-glass .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) {
    position: relative; box-sizing: border-box; width: auto !important; height: auto !important; min-height: 46px; margin: 0 auto !important; max-width: min(752px, calc(100% - 108px)) !important; padding: 1px 16px !important;
    background: var(--glass-bg-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 0 !important; border-radius: 23px !important; box-shadow: var(--glass-rim), var(--glass-shadow) !important;
}
html.tg-glass .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) textarea { padding-top: 12px !important; padding-bottom: 12px !important; background: transparent !important; }
html.tg-glass .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded label.input-file {
    position: absolute !important; right: -54px; bottom: 1px; margin: 0 !important; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; min-width: 44px !important;
    background-color: var(--glass-bg-strong) !important; background-size: 20px 20px !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 0 !important; border-radius: 50% !important; box-shadow: var(--glass-rim), var(--glass-shadow) !important;
}
html.tg-glass .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .list-files-uploaded label.input-file::after { content: none !important; }
html.tg-glass .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment:not(#bbp-none) .popup-send {
    position: absolute !important; left: -54px; bottom: 1px; margin: 0 !important;
    width: 44px !important; min-width: 44px !important; height: 44px !important; border-radius: 50% !important; box-shadow: 0 4px 14px rgba(34, 158, 217, .35) !important;
}
/* the field's row keeps off the screen's edges */
html.tg-glass .popup-container.wide .tab-answer .request-foot,
html.tg-glass .popup-container.wide .tab-answer > form { padding: 6px 12px 12px !important; }
/* the seller's templates under the field: their own row, not under the capsule (QA 2026-10-15: the chip slid under the field) */
html.tg-glass .popup-container.wide .tab-answer .bbp-templates { width: auto; max-width: min(752px, calc(100% - 108px)); margin: 8px auto 0 !important; }
html.tg-glass .popup-container.wide .tab-answer .bbp-tpl { max-width: 100%; background: var(--glass-bg-strong); border: 0; box-shadow: var(--glass-rim), var(--glass-shadow); }
html.tg-glass .popup-container.wide .tab-answer .bbp-tpl > button:first-child { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.tg-glass .popup-container.wide .tab-answer .bbp-tpl-add { background: var(--glass-bg); }
/* the service pills keep the names' capitals («Покупець: Світлана Олійник», QA 2026-10-15) */
html.tg-wall .popup-container.wide[data-wall] .request-body .request-info { text-transform: none !important; }

/* the list's top bar on phones: no bar either — the menu and the search round glass, «Купую | Продаю» a glass capsule; the list
   fades out under them (Telegram's scroll edge) */
@media (max-width: 991px) {
    html.tg-glass { --glass-page: #f3f1ea; }
    html.tg-glass #vue-app #header, html.tg-glass #vue-app .request-head #header, html.tg-glass #header { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; }
    html.tg-glass #header::before {
        content: ""; position: absolute; right: 0; left: 0; top: 0; bottom: -20px; z-index: -1; pointer-events: none;
        background: linear-gradient(to bottom, var(--glass-page) 0, var(--glass-page) 50%, transparent);
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent);
    }
    html.tg-glass #header .head-main > .btn-aside,
    html.tg-glass #header .bbp-headswitch.has-search .bbp-head-search {
        width: 44px !important; height: 44px !important; min-width: 44px; padding: 0 !important;
        background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
        border: 0 !important; border-radius: 50% !important; box-shadow: var(--glass-rim), var(--glass-shadow) !important;
    }
    html.tg-glass #header .bbp-headswitch .bbp-mode {
        background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
        border: 0 !important; border-radius: 23px !important; box-shadow: var(--glass-rim), var(--glass-shadow) !important;
    }
    html.tg-glass #header .bbp-headswitch .bbp-mode-btn { border-radius: 18px !important; }
}

/* ---------- the bubbles as Telegram's (owner 2026-10-15: «поправ хмаринки як в телеграм, лише коли пише блаблапрайс то аватарка
   зверху»): the last corner by the sender is a tail — bottom right for yours, bottom left for the other side, by its avatar at
   the bottom; BlaBlaPrice keeps its avatar on top. The tail is the bubble's own colour (inherit), the shadow a drop-shadow so
   it falls under the tail too. (Was the logo's cloud tail hanging under your bubble, 2026-10-06.) ---------- */
html.tg-wall .popup-container.wide[data-wall] {
    --tg-tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath d='M0 0C.5 9.5 4 15.5 10.6 19.3c.6.3.4.7-.2.7H0Z'/%3E%3C/svg%3E");
}
/* yours: a tail at the bottom right */
html.tg-wall .popup-container.wide[data-wall] .request-body .text-right .message .inner,
html.tg-wall .popup-container.wide[data-wall] .bbp-chat-req > .bbp-chat-bubble {
    position: relative; border-radius: 18px 18px 18px 0 !important; box-shadow: none !important; filter: drop-shadow(0 1px .5px rgba(0, 0, 0, .14));
}
html.tg-wall .popup-container.wide[data-wall] .request-body .text-right .message .inner::after,
html.tg-wall .popup-container.wide[data-wall] .bbp-chat-req > .bbp-chat-bubble::after {
    content: "" !important; display: block !important; position: absolute; top: auto !important; bottom: 0; left: -10px !important; right: auto;
    width: 11px !important; height: 20px !important; background: inherit; pointer-events: none;
    -webkit-mask: var(--tg-tail) no-repeat 0 0 / 100% 100% !important; mask: var(--tg-tail) no-repeat 0 0 / 100% 100% !important;
}
/* the other side's (a seller, the buyer's request for a seller, a seller in the chat): the tail at the bottom left, by the avatar */
html.tg-wall .popup-container.wide[data-wall] .request-body :not(.text-right) > .message > .box > .inner,
html.tg-wall .popup-container.wide[data-wall] .bbp-chat-offer {
    position: relative; border-radius: 18px 18px 0 18px !important; box-shadow: none !important; filter: drop-shadow(0 1px .5px rgba(0, 0, 0, .14));
}
html.tg-wall .popup-container.wide[data-wall] .request-body :not(.text-right) > .message > .box > .inner::after,
html.tg-wall .popup-container.wide[data-wall] .bbp-chat-offer::after {
    content: "" !important; display: block !important; position: absolute; top: auto !important; bottom: 0; right: -10px !important; left: auto;
    width: 11px !important; height: 20px !important; background: inherit; pointer-events: none; transform: scaleX(-1);
    -webkit-mask: var(--tg-tail) no-repeat 0 0 / 100% 100% !important; mask: var(--tg-tail) no-repeat 0 0 / 100% 100% !important;
}
/* a seller's offer card: its avatar out of the card, at the bottom left like any sender's */
html.tg-wall .popup-container.wide[data-wall] .bbp-chat-offer { margin-right: 46px !important; overflow: visible; }
html.tg-wall .popup-container.wide[data-wall] .bbp-chat-offer > .bbp-offer-top { position: static; grid-template-columns: minmax(0, 1fr) auto !important; }
html.tg-wall .popup-container.wide[data-wall] .bbp-chat-offer > .bbp-offer-top > .bbp-offer-price { grid-column: auto !important; align-self: start; text-align: left; }
html.tg-wall .popup-container.wide[data-wall] .bbp-chat-offer > .bbp-offer-top > .bbp-av {
    position: absolute; right: -46px; bottom: 0; width: 36px !important; height: 36px !important; min-width: 36px; margin: 0 !important; font-size: 14px;
}
/* the seller's personal offer in the request's chat came inside BlaBlaPrice's bubble: now it is the seller's own */
html.tg-wall .popup-container.wide[data-wall] .blabla-comment.bbp-pm-msg > .text { padding: 0 !important; background: transparent !important; box-shadow: none !important; filter: none; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment.bbp-pm-msg > .text > .bbp-chat-offer { margin-right: 0 !important; background: #fff; border: 0 !important; }
/* BlaBlaPrice: the avatar on top, its first bubble's top left corner points to it */
html.tg-wall .popup-container.wide[data-wall] .blabla-comment > .text { border-radius: 18px !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment.first > .text { border-top-right-radius: 4px !important; }

/* ---------- one field in the popup after the contact exchange (owner 2026-10-15: «два поля переписка і відгук… уніфікувати»):
   the chat at the bottom, the review a button and a form in BlaBlaPrice's message (components/contact-review.php) ---------- */
html.tg-wall .popup-container.wide[data-wall] .blabla-comment .bbp-crv .bbp-company-text { background: #f2f4f7; border-color: transparent; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment .bbp-crv-form .bbp-soft-btn.is-accent { margin-top: 2px; }
/* the refusal or the share card opened from «⋯» takes the field's place for the while */
.popup-container.wide:has(> .tabs-block > .tab-entry[style*="block"]) > .bbp-deal-dock { display: none !important; }

/* ---------- the agents' QA run (2026-10-15) ---------- */
/* the page's doodle background: the same picture as a 900px WebP (87 KB; it was an 8333px PNG of 677 KB on every page) */
#main::before { background-image: url(../img/patern_1-900.webp) !important; }
/* links inside a tip read as links (WCAG: link in a text block) */
.bbp-ai-tip a { text-decoration: underline; text-underline-offset: 2px; }
/* keyboard: the list's rows show where the focus is */
#main .request.open-popup:focus-visible, #main .request.bbp-row.bbp-note-row:focus-visible { outline: 2px solid #1a7cad !important; outline-offset: -2px; }
/* the phone list's chips end with a little room (the last chip touched the screen's edge) */
@media (max-width: 991px) { .bbp-seen-chips::after, .bbp-contact-chips::after { content: ""; flex: 0 0 6px; } }
/* a computer hides the head's avatar (the list beside shows it): the capsule's text keeps its left room (QA 2026-10-15) */
@media (min-width: 992px) {
    html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head.has-av > .bbp-head-av-row { padding-right: 16px !important; }
}
/* «Поділитися…» stays the blue button wherever it stands (QA 2026-10-15: white on white under «Закріпити в топі») */
.bbp-invite-btn.bbp-invite-native { color: #fff !important; background: #229ed9 !important; border-color: #229ed9 !important; }
/* the country popup as Telegram's settings list (QA 2026-10-15) */
.popup-language .bbp-cc-list { margin: 10px 0 0; padding: 0; list-style: none; background: #f4f5f7; border-radius: 14px; overflow: hidden; }
.popup-language .bbp-cc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 8px 16px 8px 10px; border-top: 1px solid #e6e8eb; }
.popup-language .bbp-cc-row:first-child { border-top: 0; }
.popup-language .bbp-cc-name { flex: 1 1 auto; font: 600 16px/1.3 "Inter", system-ui, sans-serif; color: var(--bbp-ink); text-decoration: none; }
.popup-language a.bbp-cc-name { display: flex; align-items: center; justify-content: space-between; min-height: 38px; }
.popup-language a.bbp-cc-name.is-active::after { content: "✓"; padding: 0 6px; font-weight: 700; color: #1a7cad; }
.popup-language .bbp-cc-langs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.popup-language .bbp-cc-lang { padding: 8px 14px; font: 500 14px/1.2 "Inter", system-ui, sans-serif; color: #1a6fb0; text-decoration: none; background: #e8f2fb; border-radius: 16px; }
.popup-language .bbp-cc-lang.is-active { color: #fff; background: #229ed9; }
/* the design agent's run (2026-10-15) */
/* contrast on the wallpaper: the service pills' white text was 3.2:1 — the pills denser (each palette ≥ 4.5:1 now) */
html.tg-wall [data-wall="sky"]      { --wall-pill: rgba(36, 92, 136, .84); }
html.tg-wall [data-wall="mint"]     { --wall-pill: rgba(36, 104, 72, .84); }
html.tg-wall [data-wall="sand"]     { --wall-pill: rgba(124, 86, 32, .86); }
html.tg-wall [data-wall="leaf"]     { --wall-pill: rgba(66, 100, 44, .86); }
html.tg-wall [data-wall="pink"]     { --wall-pill: rgba(140, 52, 92, .84); }
html.tg-wall [data-wall="lavender"] { --wall-pill: rgba(76, 68, 146, .84); }
html.tg-wall [data-wall="wheat"]    { --wall-pill: rgba(114, 86, 44, .86); }
html.tg-wall [data-wall="steel"]    { --wall-pill: rgba(44, 82, 112, .84); }
html.tg-wall [data-wall="peach"]    { --wall-pill: rgba(142, 76, 58, .84); }
html.tg-wall [data-wall="teal"]     { --wall-pill: rgba(24, 100, 96, .84); }
html.tg-wall [data-wall="orchid"]   { --wall-pill: rgba(110, 58, 134, .84); }
html.tg-wall [data-wall="green"]    { --wall-pill: rgba(44, 106, 54, .84); }
html.tg-wall .popup-container.wide[data-wall] .bbp-bc-chip { background: rgba(0, 0, 0, .2) !important; }
/* your review's date and «Змінити відгук» stood bare on the wallpaper: a pill like the time under a Telegram sticker */
html.tg-wall .popup-container.wide[data-wall] .message.bbp-own-review .bbp-own-review-foot { width: fit-content; margin: 6px auto 0 0 !important; padding: 3px 10px; background: var(--wall-pill); border-radius: 12px; }
html.tg-wall .popup-container.wide[data-wall] .bbp-own-review-foot,
html.tg-wall .popup-container.wide[data-wall] .bbp-own-review-foot * { color: #fff !important; }
html.tg-wall .popup-container.wide[data-wall] .bbp-own-review-foot .bbp-review-edit { text-decoration: underline; text-underline-offset: 2px; }
/* the cream leftovers inside the Telegram popups (the «Закріпити в топі» tip, the timer, a match pill) take a cool grey */
html.tg-wall:not([data-theme="dark"]) .popup-container.wide[data-wall] :is(.bbp-tip.bbp-keep, .bbp-timer, .bbp-offer-match:not(.is-full)) { background: #eef2f6 !important; }
/* the «☰ Меню» pill over the field (after «Що далі?» is closed): glass too */
html.tg-glass .popup-container.wide[data-wall] .bbp-lcard-pill {
    height: 36px; background: var(--glass-bg-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 0 !important; border-radius: 18px !important; box-shadow: var(--glass-rim), var(--glass-shadow) !important;
}
/* an offer card's text stood indented by the avatar it no longer has inside */
html.tg-wall .popup-container.wide[data-wall] .bbp-chat-offer > :not(.bbp-offer-top) { margin-right: 0 !important; }
/* the seller's request popup: the talk centred like the others (its right room was for the old field) */
html.tg-glass .popup-container.wide .request-body.seller-order .request-body_inner { padding-left: 2% !important; }
/* the deal chat's «←» as bold as the others' */
html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head > .d-flex > svg:first-child { stroke: var(--bbp-ink) !important; stroke-width: 2.2; }
/* a short note at the bottom (the share link copied): Telegram's toast, glass; not the site's messages (.bbp-toast with a body, at
   the top), which this rule had stretched over the whole screen, dark words on dark (2026-10-20) */
.bbp-toast:not(:has(.bbp-toast-body)) {
    position: fixed; right: 50%; top: auto; bottom: 96px; z-index: 9999; display: block; width: auto; border: 0; transform: translateX(50%); max-width: calc(100vw - 32px); padding: 10px 16px;
    font: 500 14px/1.35 "Inter", system-ui, sans-serif; color: #fff; background: rgba(20, 28, 38, .86);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    transition: opacity .4s; text-align: center;
}
.bbp-toast.is-out { opacity: 0; }
/* «⋯ → Закрити» repeated «←» and threw an error in the old menu script: the menu keeps the actions only (QA 2026-10-15) */
.drop-menu.bbp-head-menu .drop > li:has(> .js-close-popup) { display: none !important; }
/* «Змінюєш пропозицію · Скасувати» over the field: a glass strip, not words on the wallpaper */
html.tg-glass .popup-container.wide .tab-answer .bbp-compose-mode {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: min(752px, calc(100% - 108px)); margin: 0 auto 8px !important; padding: 6px 14px 6px 6px !important;
    background: var(--glass-bg-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 0 !important; border-radius: 16px; box-shadow: var(--glass-rim), var(--glass-shadow);
}

/* the wallpapers as Telegram's (owner 2026-10-16: «густіше і іконки тоншими лініями», «більш кумедні, іграшкові»): the gradient richer, the
   thinner doodles' ink a bit stronger (the tile itself is common\services\ChatWall v3: 8×8, ~1px lines, toy-like doodles, little stars) */
html.tg-wall [data-wall="sky"] { --w0: #bfdcf0; --w1: #8fc2e5; --w2: #e1eff8; --w3: #6caddc; --w4: #bde7de; --wall-ink: rgba(30, 92, 140, 0.29); }
html.tg-wall [data-wall="mint"] { --w0: #bfecd6; --w1: #8ae0b0; --w2: #e3f5ea; --w3: #67d296; --w4: #cfedb2; --wall-ink: rgba(28, 108, 70, 0.29); }
html.tg-wall [data-wall="sand"] { --w0: #edd9b3; --w1: #e1bd7e; --w2: #f6ebd7; --w3: #d9a55c; --w4: #ead0a5; --wall-ink: rgba(136, 88, 22, 0.29); }
html.tg-wall [data-wall="leaf"] { --w0: #d8e5a8; --w1: #add968; --w2: #edf0cb; --w3: #83c352; --w4: #d9dd71; --wall-ink: rgba(58, 98, 30, 0.32); }
html.tg-wall [data-wall="pink"] { --w0: #f2c9d8; --w1: #e89db8; --w2: #f9e5ed; --w3: #e07ba3; --w4: #eec7b7; --wall-ink: rgba(146, 40, 88, 0.25); }
html.tg-wall [data-wall="lavender"] { --w0: #cecbf3; --w1: #a8a1e9; --w2: #eae9fa; --w3: #857ce0; --w4: #c3d4f1; --wall-ink: rgba(68, 58, 148, 0.28); }
html.tg-wall [data-wall="wheat"] { --w0: #efddbc; --w1: #e1bc80; --w2: #f6eedd; --w3: #d8a357; --w4: #ebdaa9; --wall-ink: rgba(118, 84, 34, 0.29); }
html.tg-wall [data-wall="steel"] { --w0: #c4dce9; --w1: #95c0db; --w2: #e3eef3; --w3: #72a9ce; --w4: #c7e0d9; --wall-ink: rgba(38, 78, 108, 0.29); }
html.tg-wall [data-wall="peach"] { --w0: #f2d1c6; --w1: #e7ab99; --w2: #f9eae4; --w3: #de8a73; --w4: #eed5b7; --wall-ink: rgba(146, 68, 48, 0.26); }
html.tg-wall [data-wall="teal"] { --w0: #bdebe7; --w1: #80ded7; --w2: #e1f5f2; --w3: #57cfc6; --w4: #c0e7c7; --wall-ink: rgba(18, 106, 100, 0.29); }
html.tg-wall [data-wall="orchid"] { --w0: #e5c6f0; --w1: #d298e7; --w2: #f4e6f7; --w3: #c171de; --w4: #e8c4e5; --wall-ink: rgba(108, 48, 138, 0.26); }
html.tg-wall [data-wall="green"] { --w0: #c5ecc6; --w1: #92e099; --w2: #e6f5e7; --w3: #6bd177; --w4: #d7edb2; --wall-ink: rgba(38, 112, 48, 0.29); }
/* on a computer the doodles a little bigger, as Telegram Desktop's */
@media (min-width: 992px) {
    .tg-wall .popup-container.wide[data-wall]::before { -webkit-mask-size: 327px 327px; mask-size: 327px 327px; }
}
html.tg-glass .popup-container.wide .tab-answer .bbp-compose-mode > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
html.tg-glass .popup-container.wide .tab-answer .bbp-compose-mode > button { flex: none; }

/* ---------- usability round (owner 2026-10-16: «роби пропозиції зручності») ---------- */
/* a review's mark is the form's emoji, not a coloured dot */
.bbp-rate-dot.is-emoji, .bbp-rated-text.is-pos .bbp-rate-dot.is-emoji, .bbp-rated-text.is-neg .bbp-rate-dot.is-emoji {
    width: auto; height: auto; margin: 0 0 0 6px; font-size: 1.05em; line-height: 1; vertical-align: -1px; background: none !important; border-radius: 0;
}
/* what the exchange means, said under the offer's buttons */
.bbp-pm-hint { display: block; margin: 6px 0 0; font: 500 12.5px/1.4 "Inter", system-ui, sans-serif; color: var(--bbp-muted); }
/* the seller's field says how the text will go */
.popup-container.wide .tab-answer .bbp-compose-kind {
    margin: 0 0 8px; padding: 6px 12px; font: 500 13px/1.35 "Inter", system-ui, sans-serif; color: #7a4a10; background: #fff4e0; border-radius: 12px;
}
.popup-container.wide .tab-answer .bbp-compose-kind.is-ask { color: #1d5e3a; background: #e3f6ea; }
html.tg-glass .popup-container.wide .tab-answer .bbp-compose-kind { max-width: min(752px, calc(100% - 108px)); margin: 0 auto 8px !important; box-shadow: var(--glass-rim), var(--glass-shadow); }
/* «Купив? Закрий запит»: two buttons in BlaBlaPrice's message */
.bbp-done-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.bbp-done-ask-btns form { margin: 0; }
/* the sellers' word in the sign-up (only when opened for selling) */
.bbp-seller-pitch { display: none; }
.is-seller .bbp-seller-pitch { display: block; margin: 4px 0 16px; padding: 12px 16px 12px 14px; list-style: none; background: #eef6fb; border-radius: 14px; }
.is-seller .bbp-seller-pitch li { position: relative; margin: 0; text-align: right; padding: 3px 22px 3px 0; font: 500 14px/1.45 "Inter", system-ui, sans-serif; color: var(--bbp-ink); }
.is-seller .bbp-seller-pitch li::before { content: "✓"; position: absolute; right: 0; top: 3px; font-weight: 700; color: #1a7cad; }
/* the questions under the home field on a phone (the computer has them in the right column) */
.bbp-home-faq { display: none; }
@media (max-width: 991px) { .bbp-home-faq { display: block; margin: 28px 0 8px; } }

/* ---------- the light theme as WhatsApp's (owner 2026-10-16, his screenshots: «лівий сайтбар білим як я зробив, бекграунд в
   попапах як у ватсапа, аватарки також як у ватсапа»); the dark theme stays Telegram Night ---------- */
/* the left sidebar white */
html:not([data-theme="dark"]) #aside-left, html:not([data-theme="dark"]) #aside-left > .wrap { background-color: #fff !important; }
/* the chat's background: Telegram's moving gradient (owner 2026-10-16: «зроби ще зміну градієнту як в телеграмі»; it was WhatsApp's
   flat beige): four soft spots of the section's palette on Telegram's eight points; they glide along them very slowly as the talk is
   scrolled («градієнт буде рухатись при скролі, але дуже повільно»; js/bbp-cards.js sets --wpNx/y); the doodles in the palette's ink */
@property --wp0x { syntax: '<percentage>'; inherits: true; initial-value: 80%; }
@property --wp0y { syntax: '<percentage>'; inherits: true; initial-value: 10%; }
@property --wp1x { syntax: '<percentage>'; inherits: true; initial-value: 35%; }
@property --wp1y { syntax: '<percentage>'; inherits: true; initial-value: 25%; }
@property --wp2x { syntax: '<percentage>'; inherits: true; initial-value: 20%; }
@property --wp2y { syntax: '<percentage>'; inherits: true; initial-value: 90%; }
@property --wp3x { syntax: '<percentage>'; inherits: true; initial-value: 65%; }
@property --wp3y { syntax: '<percentage>'; inherits: true; initial-value: 75%; }
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] {
    --wall-pill: #fff;
    background-color: var(--w0) !important;
    background-image:
        radial-gradient(circle at var(--wp0x) var(--wp0y), var(--w1) 0, transparent 55%),
        radial-gradient(circle at var(--wp1x) var(--wp1y), var(--w2) 0, transparent 55%),
        radial-gradient(circle at var(--wp2x) var(--wp2y), var(--w3) 0, transparent 55%),
        radial-gradient(circle at var(--wp3x) var(--wp3y), var(--w4) 0, transparent 55%) !important;
    transition: --wp0x .9s ease-out, --wp0y .9s ease-out, --wp1x .9s ease-out, --wp1y .9s ease-out, --wp2x .9s ease-out, --wp2y .9s ease-out, --wp3x .9s ease-out, --wp3y .9s ease-out;
}
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall]::before { opacity: .62; }
html.tg-wall .popup-container.wide[data-wall].is-wall-still { transition: none !important; }
@media (prefers-reduced-motion: reduce) { html.tg-wall .popup-container.wide[data-wall] { transition: none !important; } }
/* the service lines are WhatsApp's white date chips: grey words, a hairline shadow */
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .request-body .request-info,
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .bbp-chat-req > .bbp-chat-label,
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .bbp-buyer-channels,
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .bbp-deal.is-chat :is(p.bbp-deal-hint, p.bbp-deal-note),
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] :is(.bbp-dm-share, .bbp-dm-shared),
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .message.bbp-own-review .bbp-own-review-foot {
    color: #54656f !important; background: #fff !important; box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] :is(.bbp-bc-lead, .bbp-own-review-foot *) { color: #54656f !important; }
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .bbp-bc-chip { color: #3b4a54 !important; background: #f0f2f5 !important; }
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .bbp-bc-chip .bbp-icon { color: #008069 !important; }
html.tg-wall:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] :is(.bbp-dm-share, .bbp-own-review-foot .bbp-review-edit) { color: #027eb5 !important; }

/* the avatars: a pastel circle, the letter (or the category's icon) in the same colour, darker — WhatsApp's look */
html:not([data-theme="dark"]) .bbp-av-0 { background: #fde2e4 !important; color: #c0394b !important; }
html:not([data-theme="dark"]) .bbp-av-1 { background: #fdebd3 !important; color: #b45309 !important; }
html:not([data-theme="dark"]) .bbp-av-2 { background: #e3e6ff !important; color: #4f46e5 !important; }
html:not([data-theme="dark"]) .bbp-av-3 { background: #dcf5dd !important; color: #2e7d32 !important; }
html:not([data-theme="dark"]) .bbp-av-4 { background: #d3f2ee !important; color: #00796b !important; }
html:not([data-theme="dark"]) .bbp-av-5 { background: #dbeefc !important; color: #1f6fb2 !important; }
html:not([data-theme="dark"]) .bbp-av-6 { background: #f3e1fa !important; color: #9c27b0 !important; }
html:not([data-theme="dark"]) :is(.bbp-av-0, .bbp-av-1, .bbp-av-2, .bbp-av-3, .bbp-av-4, .bbp-av-5, .bbp-av-6) { box-shadow: none !important; }
html:not([data-theme="dark"]) .bbp-row-av.is-cat { color: var(--c, #8e8e93) !important; background: color-mix(in srgb, var(--c, #8e8e93) 16%, #fff) !important; }
html:not([data-theme="dark"]) .bbp-row-av.is-cat svg { stroke: var(--c, #8e8e93) !important; filter: brightness(.82); }
/* the white sidebar's switch and chosen item (owner 2026-10-16: «поправ переключалку купую/продаю та активний пункт меню») */
/* «Купую | Продаю»: a grey track, the chosen half white — the segmented look of iOS / WhatsApp */
html:not([data-theme="dark"]) #aside-left .bbp-nav-switch .bbp-mode { gap: 4px !important; padding: 4px !important; background: #f0f2f5 !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important; }
html:not([data-theme="dark"]) #aside-left .bbp-nav-switch .bbp-mode-btn { color: #54656f !important; background: transparent !important; border-radius: 10px !important; box-shadow: none !important; }
html:not([data-theme="dark"]) #aside-left .bbp-nav-switch .bbp-mode-btn:hover:not(.is-active) { color: #111b21 !important; }
html:not([data-theme="dark"]) #aside-left .bbp-nav-switch .bbp-mode-btn.is-active { color: #111b21 !important; background: #fff !important; box-shadow: 0 1px 3px rgba(11, 20, 26, .16) !important; font-weight: 600; }
/* the chosen menu item: the selected row of Telegram — blue, the words and the icon white (#1a7cad keeps white text readable) */
html:not([data-theme="dark"]) #aside-left .bbp-nav a.link.active,
html:not([data-theme="dark"]) #aside-left .bbp-nav .bbp-nav-side .bbp-nav-sub a.link.active,
html:not([data-theme="dark"]) #aside-left .bbp-nav .bbp-nav-side .bbp-nav-sub a.link.active:hover { color: #fff !important; background: #229ed9 !important; box-shadow: none !important; }
html:not([data-theme="dark"]) #aside-left .bbp-nav a.link.active > span { color: #fff !important; }
html:not([data-theme="dark"]) #aside-left .bbp-nav a.link.active .tg-ic { background: rgba(255, 255, 255, .2) !important; }
html:not([data-theme="dark"]) #aside-left .bbp-nav a.link.active .tg-ic svg { color: #fff !important; stroke: #fff !important; }
html:not([data-theme="dark"]) #aside-left .bbp-nav a.link.active .count { color: #1a7cad !important; background: #fff !important; }
/* the account's own avatar without a photo (the menu's foot, «Вхід»): WhatsApp's pastel circle, the person in the logo's blue */
html:not([data-theme="dark"]) aside .avatar:not(.bbp-av):not(.bbp-av-photo) { background: #dbeefc !important; }
html:not([data-theme="dark"]) aside .avatar:not(.bbp-av):not(.bbp-av-photo) svg,
html:not([data-theme="dark"]) aside .avatar:not(.bbp-av):not(.bbp-av-photo) svg * { fill: #229ed9 !important; color: #229ed9 !important; }
/* the same switch in the header beside an open chat (a computer) */
@media (min-width: 992px) {
    html:not([data-theme="dark"]) #header .bbp-headswitch .bbp-mode { gap: 4px !important; padding: 4px !important; background: #f0f2f5 !important; border: 0 !important; box-shadow: none !important; }
    html:not([data-theme="dark"]) #header .bbp-headswitch .bbp-mode-btn { color: #54656f !important; background: transparent !important; box-shadow: none !important; }
    html:not([data-theme="dark"]) #header .bbp-headswitch .bbp-mode-btn.is-active { color: #111b21 !important; background: #fff !important; box-shadow: 0 1px 3px rgba(11, 20, 26, .16) !important; font-weight: 600; }
}
/* the open chat in the list: the logo's blue, white words — as the chosen menu item and Telegram's selected chat (owner 2026-10-16:
   «фон активного чату роби як в логотипі, синім і як активне меню») */
html:not([data-theme="dark"]) #main .request.open-popup.bbp-row.bbp-is-open,
html:not([data-theme="dark"]) body.bbp-split #main .request.open-popup.bbp-row.bbp-is-open { background: #229ed9 !important; --ring: #229ed9; box-shadow: none !important; }
html:not([data-theme="dark"]) #main .request.open-popup.bbp-row.bbp-is-open *:not(.bbp-av):not(.bbp-av *):not(.bbp-row-av):not(.bbp-row-av *) { color: #fff !important; }
html:not([data-theme="dark"]) #main .request.open-popup.bbp-row.bbp-is-open :is(.bbp-row-badge, .bbp-row-upd, .bbp-row-mark.is-best):not(#bbp-none) { color: #229ed9 !important; background: #fff !important; }
html:not([data-theme="dark"]) #main .request.open-popup.bbp-row.bbp-is-open :is(.bbp-row-badge, .bbp-row-upd, .bbp-row-mark.is-best):not(#bbp-none) * { color: #229ed9 !important; }
html:not([data-theme="dark"]) #main .request.open-popup.bbp-row.bbp-is-open :is(.bbp-row-ic, .bbp-row-reply, .bbp-row-rv) { background: rgba(255, 255, 255, .24) !important; border-color: transparent !important; }
html:not([data-theme="dark"]) #main .request.open-popup.bbp-row.bbp-is-open .bbp-row-ic svg { color: #fff !important; stroke: #fff !important; }
html:not([data-theme="dark"]) #main .request.open-popup.bbp-row.bbp-is-open :is(.bbp-row-av, .bbp-av) { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55) !important; }
/* the left menu's icons each on its own colour, as Telegram's settings (owner 2026-10-16: «іконки в лівому сайтбарі роби
   кольоровими як в телеграмі»; were grey but the chosen one); the chosen row keeps its white tile on the blue */
html:not([data-theme="dark"]) #aside-left .tg-ic { background: var(--c, #8e8e93) !important; }
/* every hover on white is WhatsApp's #f0f2f5 (owner 2026-10-16: «всі ховери на білому фоні роби #f0f2f5»): the account's block and its
   menu too */
html:not([data-theme="dark"]) #aside-left .foot > .link-btn:hover,
html:not([data-theme="dark"]) #aside-left .foot ul li > :is(a, button):hover,
html:not([data-theme="dark"]) #aside-left .foot ul li form > button:hover { background-color: #f0f2f5 !important; border-radius: 12px; }

/* ---------- the bubbles' radii and gaps as Telegram's (owner 2026-10-16: «зроби радіуси і відстані між хмаринками як в телеграмі»):
   16px round, compact inside; 10px between different speakers and round the service pills; 4px within one speaker's run, the
   corners on the speaker's side 6px there, the tail and the avatar only at the run's last bubble ---------- */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > *:not(:first-child),
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-deal.is-chat,
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-deal-log > *:not(:first-child) { margin-top: 10px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-deal-log > :first-child { margin-top: 0 !important; }
/* one speaker's run */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(
    .text-right + .text-right, .bbp-dmsg.is-mine + .bbp-dmsg.is-mine, .bbp-dmsg.is-theirs + .bbp-dmsg.is-theirs, .blabla-comment + .blabla-comment) { margin-top: 4px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .text-right .message .inner { margin-bottom: 0 !important; }
/* the bubbles: 16px, compact */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .text-right .message .inner { padding: 7px 12px 7px !important; border-radius: 16px 16px 16px 0 !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :not(.text-right) > .message > .box > .inner { padding: 7px 12px 7px !important; border-radius: 16px 16px 0 16px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .blabla-comment > .text { padding: 8px 12px 9px !important; border-radius: 16px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .blabla-comment.first > .text { border-top-right-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-chat-offer { border-radius: 16px 16px 0 16px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .text-right .message .inner .date { margin-top: 2px !important; }
/* within a run: no tail and a small corner where the next one follows, a small top corner after one */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(.text-right:has(+ .text-right), .bbp-dmsg.is-mine:has(+ .bbp-dmsg.is-mine)) .message .inner { border-bottom-left-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(.text-right:has(+ .text-right), .bbp-dmsg.is-mine:has(+ .bbp-dmsg.is-mine)) .message .inner::after { display: none !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(.text-right + .text-right, .bbp-dmsg.is-mine + .bbp-dmsg.is-mine) .message .inner { border-top-left-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-dmsg.is-theirs:has(+ .bbp-dmsg.is-theirs) .message > .box > .inner { border-bottom-right-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-dmsg.is-theirs:has(+ .bbp-dmsg.is-theirs) .message > .box > .inner::after { display: none !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-dmsg.is-theirs:has(+ .bbp-dmsg.is-theirs) .message > .box > .avatar { visibility: hidden; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-dmsg.is-theirs + .bbp-dmsg.is-theirs .message > .box > .inner { border-top-right-radius: 6px !important; }
/* «Додати в запит для всіх» under one's own bubble: close to it */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-dmsg.is-mine > :is(.bbp-dm-share, .bbp-dm-shared) { margin-top: 4px !important; }
/* the other side's review stands right in the talk (no wrapper), and BlaBlaPrice's run keeps no bottom room */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > .message > .box > .inner { padding: 7px 12px 7px !important; border-radius: 16px 16px 0 16px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .blabla-comment { margin-bottom: 0 !important; }
/* every bubble at most 80% of the talk's column (owner 2026-10-16: «ширина хмаринки 80% від ширини місця переписки»), the avatar
   counted in: BlaBlaPrice's (were the whole width), the other side's, yours, an offer card */
@media (min-width: 768px) {
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .blabla-comment { max-width: 80% !important; }
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .text-right > .message { padding-right: 20% !important; }
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(:not(.text-right) > .message, .request-body_inner > .message) > .box { max-width: 80% !important; }
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(:not(.text-right) > .message, .request-body_inner > .message) > .box > .inner { max-width: none !important; flex: 0 1 auto; }
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > .bbp-chat-offer,
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > * > .bbp-chat-offer { max-width: calc(80% - 46px) !important; }
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(.bbp-chat-myreview, .bbp-chat-req > .bbp-chat-bubble) { max-width: 80% !important; }
}
/* a phone's column is narrow: the messages 85% (Telegram's on a phone), BlaBlaPrice's lists of prices and offers the whole width */
@media (max-width: 767px) {
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .text-right > .message { padding-right: 15% !important; }
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(:not(.text-right) > .message, .request-body_inner > .message) > .box { max-width: 85% !important; }
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(:not(.text-right) > .message, .request-body_inner > .message) > .box > .inner { max-width: none !important; flex: 0 1 auto; }
}
/* (a phone) the contacts' bubble: a long e-mail needs the room */
@media (max-width: 767px) {
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .message:has(.bbp-contact-links, .bbp-offer-contacts, a[href^="mailto:"]) > .box { max-width: 100% !important; }
}

/* the chats' colour scheme the person picked in the settings (html[data-wallscheme], common\services\ChatWall::SCHEMES — the same
   colours), light theme; it wins over the section's palette. --tg-out: your bubbles' colour, a theme's pair as WhatsApp's (2026-10-17) */
html.tg-wall[data-wallscheme="wa"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #efeae2; --w1: #efeae2; --w2: #efeae2; --w3: #efeae2; --w4: #efeae2; --wall-ink: rgba(110, 90, 60, .2); --tg-out: #d9fdd3; }
html.tg-wall[data-wallscheme="powder"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #d4dbe4; --w1: #d4dbe4; --w2: #d4dbe4; --w3: #c9dbee; --w4: #d4dbe4; --wall-ink: rgba(50, 90, 130, .17); --tg-out: #d4e9fc; }
html.tg-wall[data-wallscheme="sage"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #e2eadf; --w1: #cfdcc8; --w2: #eff4ec; --w3: #d7e3d1; --w4: #e8efe4; --wall-ink: rgba(70, 100, 60, .17); --tg-out: #d8f2cd; }
html.tg-wall[data-wallscheme="lavender"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #e7e3f3; --w1: #d8d0ee; --w2: #f3f0fa; --w3: #ded7f1; --w4: #ece8f7; --wall-ink: rgba(85, 65, 135, .16); --tg-out: #e4dcfb; }
html.tg-wall[data-wallscheme="blush"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #f4e3e7; --w1: #edd1d8; --w2: #faf0f2; --w3: #f1d9df; --w4: #f6e9ec; --wall-ink: rgba(135, 65, 85, .15); --tg-out: #fcdde6; }
html.tg-wall[data-wallscheme="peach"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #f7e8dd; --w1: #f0d7c4; --w2: #fcf3ec; --w3: #f4dece; --w4: #f9ece2; --wall-ink: rgba(135, 85, 55, .15); --tg-out: #fde3d0; }
html.tg-wall[data-wallscheme="seafoam"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #ddf0ea; --w1: #c8e6dd; --w2: #edf8f4; --w3: #d2ebe3; --w4: #e4f3ee; --wall-ink: rgba(40, 105, 90, .16); --tg-out: #ccf2e5; }
html.tg-wall[data-wallscheme="butter"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #f6f0d9; --w1: #eee4c0; --w2: #fbf8ea; --w3: #f3eacb; --w4: #f8f3e1; --wall-ink: rgba(125, 105, 45, .16); --tg-out: #faf1c6; }
html.tg-wall[data-wallscheme="mauve"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #eee3ec; --w1: #e3d1e0; --w2: #f7f0f5; --w3: #e9d9e6; --w4: #f2e8ef; --wall-ink: rgba(115, 65, 105, .15); --tg-out: #f3dcee; }
html.tg-wall[data-wallscheme="aqua"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #dcedf2; --w1: #c7e2ea; --w2: #edf6f9; --w3: #d1e8ee; --w4: #e3f1f5; --wall-ink: rgba(35, 100, 120, .16); --tg-out: #cdeef6; }
html.tg-wall[data-wallscheme="aurora"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #e8eaf4; --w1: #f3d6e5; --w2: #d3e6f5; --w3: #d8eedb; --w4: #e6dbf5; --wall-ink: rgba(75, 75, 115, .15); --tg-out: #e6defa; }
html.tg-wall[data-wallscheme="sorbet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #f6eae2; --w1: #f8d4cc; --w2: #faecd0; --w3: #dceccf; --w4: #f3d8e6; --wall-ink: rgba(125, 80, 70, .15); --tg-out: #fde3d6; }
html.tg-wall[data-wallscheme="mist"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #e3e7ec; --w1: #cfd7e2; --w2: #f1f3f6; --w3: #c6d0dc; --w4: #dfe5ec; --wall-ink: rgba(60, 70, 90, .15); --tg-out: #dcebfa; }
html.tg-wall[data-wallscheme="iris"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #eaecfd; --w1: #dde1ff; --w2: #f6f6fc; --w3: #d5dbeb; --w4: #e9ebfe; --wall-ink: rgba(75, 85, 150, .15); --tg-out: #e0e4ff; }
html.tg-wall[data-wallscheme="frost"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --w0: #e9f3fb; --w1: #ebf5fe; --w2: #eef1f6; --w3: #cfd6e1; --w4: #e7f2fb; --wall-ink: rgba(50, 95, 135, .15); --tg-out: #dcefff; }
/* «iris» and «frost» (owner 2026-10-20, two screenshots): a still gradient from the top down with a grey-blue shade in the bottom right
   corner, as in the pictures; the moving spots are off for them */
html.tg-wall[data-wallscheme="iris"]:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] { background-image: radial-gradient(62% 55% at 100% 100%, #d5dbeb 0, rgba(213, 219, 235, 0) 100%), linear-gradient(-180deg, #dde1ff, #e9ebfe 48%, #f6f6fc) !important; }
html.tg-wall[data-wallscheme="frost"]:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] { background-image: radial-gradient(62% 55% at 100% 100%, #cfd6e1 0, rgba(207, 214, 225, 0) 100%), linear-gradient(-180deg, #ebf5fe, #e6f1fa 50%, #eef1f6) !important; }
.bbp-wall-pick > button[data-bbp-wall="iris"] { background-image: radial-gradient(62% 55% at 100% 100%, #d5dbeb 0, rgba(213, 219, 235, 0) 100%), linear-gradient(-180deg, #dde1ff, #e9ebfe 48%, #f6f6fc); }
.bbp-wall-pick > button[data-bbp-wall="frost"] { background-image: radial-gradient(62% 55% at 100% 100%, #cfd6e1 0, rgba(207, 214, 225, 0) 100%), linear-gradient(-180deg, #ebf5fe, #e6f1fa 50%, #eef1f6); }
/* the samples in the settings: the scheme's gradient with the doodles, the chosen one ringed and ticked */
.bbp-wall-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; margin: 12px 0 0; }
.bbp-wall-pick > button {
    position: relative; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; cursor: pointer; isolation: isolate;
    background-color: var(--w0, #cfe5f4);
    background-image:
        radial-gradient(circle at 80% 10%, var(--w1, #a8d2ef) 0, transparent 60%),
        radial-gradient(circle at 25% 60%, var(--w2, #e6f2fa) 0, transparent 60%),
        radial-gradient(circle at 20% 90%, var(--w3, #8fc2e7) 0, transparent 60%),
        radial-gradient(circle at 65% 75%, var(--w4, #d3ebe6) 0, transparent 60%);
    border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.bbp-wall-pick > button::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--wall-ink, rgba(30, 92, 140, .2)); opacity: .7;
    -webkit-mask: var(--wall-img) 0 0 / 130px 130px repeat; mask: var(--wall-img) 0 0 / 130px 130px repeat;
}
.bbp-wall-pick > button.is-auto {
    background-image: linear-gradient(-135deg, #e3eef5 0 33%, #e4f1eb 33% 66%, #f4ebdc 66%);
}
.bbp-wall-pick > button.is-auto span {
    position: absolute; right: 4px; left: 4px; bottom: 6px; padding: 4px 3px; font: 600 10px/1.25 "Inter", system-ui, sans-serif; text-align: center; overflow-wrap: anywhere;
    color: #111b21; background: rgba(255, 255, 255, .85); border-radius: 8px;
}
.bbp-wall-pick > button[aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #229ed9; }
.bbp-wall-pick > button[aria-checked="true"]::after {
    content: "✓"; position: absolute; top: 6px; left: 6px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    font: 700 13px/1 system-ui, sans-serif; color: #fff; background: #229ed9; border-radius: 50%;
}
.bbp-wall-pick > button:focus-visible { outline: 2px solid #229ed9; outline-offset: 3px; }
/* BlaBlaPrice's timer («Шукаю нових продавців…») and the sellers' offers under it stood 46px in from the other messages (owner
   2026-10-16: «тут виступ треба поправити»): one column with the rest */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(.bbp-wait-tail, .bbp-chat-log) { margin-right: 0 !important; }
/* the timer's block was capped at 720px, so its bubble came out narrower than the others (owner 2026-10-16: «вирівняй останню хмаринку») */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(.bbp-wait-tail, .bbp-chat-log) { max-width: none !important; margin-left: 0 !important; }
/* the steps strip the size of BlaBlaPrice's bubbles (owner 2026-10-16: «цей блок також зроби шириною з хмаринкою»): from the bubbles'
   text (past the avatar's 53px) to a full bubble's end — 80% of the talk on a computer, the whole row on a phone */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > .bbp-pop-journey { box-sizing: border-box; margin-right: 53px !important; margin-left: 0 !important; width: auto !important; max-width: none !important; }
@media (min-width: 768px) {
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > .bbp-pop-journey { width: calc(80% - 53px) !important; }
}
/* its steps never break a word (on a phone «пропози-ції»): each column at least its longest word, the rest shared */
html.tg-wall .popup-container.wide[data-wall] .bbp-pop-journey .bbp-journey { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(min-content, 1fr); }
html.tg-wall .popup-container.wide[data-wall] .bbp-pop-journey .bbp-journey li { overflow-wrap: normal !important; word-break: normal !important; hyphens: none; }
@media (max-width: 767px) {
    html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > .bbp-pop-journey { padding-right: 10px !important; padding-left: 10px !important; }
    html.tg-wall .popup-container.wide[data-wall] .bbp-pop-journey .bbp-journey li { font-size: 11px !important; }
}
/* changing a review inside its own bubble (owner 2026-10-16): the bubble widens to the form, the old words hide while it is open */
.bbp-own-review .inner.is-editing { width: min(560px, 100%) !important; max-width: 100% !important; box-sizing: border-box; }
.bbp-own-review .inner.is-editing > .comment { display: none !important; }
.bbp-own-review .inner > .bbp-crv { margin: 0 !important; text-align: right; }
.bbp-own-review .inner > .bbp-crv .bbp-company-ask { margin: 2px 0 8px; }
.bbp-own-review .inner > .bbp-crv .bbp-ask-opt:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .85); border-color: transparent; }
.bbp-own-review .inner > .bbp-crv .bbp-company-text { background: #fff !important; border-color: transparent !important; }
.bbp-own-review .inner > .bbp-crv .bbp-crv-form > button + button { margin-right: 8px; }
.bbp-crv-cancel { background: rgba(255, 255, 255, .7) !important; }
/* a seller's offer in the request's talk: its wrapper took the bubbles' padding, so the card was 24px narrower and its avatar off the
   column (owner 2026-10-16: «вирівняй макс ширину пропозиції хмаринки»): the card the bubble's full width, the avatar where BlaBlaPrice's is */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .blabla-comment.bbp-pm-msg > .text { padding: 0 !important; background: transparent !important; box-shadow: none !important; filter: none !important; border-radius: 0 !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .blabla-comment.bbp-pm-msg > .text > .bbp-chat-offer { width: 100%; box-sizing: border-box; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .blabla-comment.bbp-pm-msg .bbp-chat-offer > .bbp-offer-top > .bbp-av { right: -53px; }
/* the divider before the offers: one of the service pills, room around it */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-chat-log > .bbp-offers-sep { display: table; margin: 12px auto 10px !important; }
/* a found price's checks: the words in the text's colour, only the mark green, red or grey (owner 2026-10-16: «ці тексти не пиши зеленим
   чи червоним, лише галочку роби зелену чи червону») */
.bbp-price-fit :is(.is-yes, .is-no, .is-unknown) { color: #3b4a54 !important; }
.bbp-price-fit .is-yes > i { color: #1e9e4a !important; }
.bbp-price-fit .is-no > i { color: #d0453a !important; }
.bbp-price-fit .is-unknown > i { color: #8696a0 !important; }
/* a list line with something not read yet (QA 2026-10-16, «чи зрозуміла логіка»): Telegram's blue count of the messages / offers, the
   time in the same blue as WhatsApp marks it, the unread words darker; «Ти:» before one's own last message in grey */
.bbp-row-badge.is-unread { color: #fff !important; background: #229ed9 !important; }
#main .request.open-popup.bbp-row:has(.bbp-row-badge.is-unread) .bbp-row-time { color: #1a7cad; font-weight: 600; }
.bbp-row-sub .bbp-row-unread-text { font-weight: 500; color: var(--bbp-ink); }
.bbp-row-sub .bbp-row-name.is-me { color: #62676c; font-weight: 400; }
/* the menu's numbers count what is new (QA 2026-10-16, Telegram's unread chats): blue as the lines' counts; the open item keeps its white one */
aside .count.bbp-count-total.is-news, #header .aside-menu a.link .count.bbp-count-total.is-news, .bbp-nav-head .count.bbp-count-total.is-news { color: #fff !important; background: #229ed9 !important; }
/* the seller's offer the check held: a word on its line, not a bare «!» */
.bbp-row-upd.is-held { margin: 0 6px 0 0; flex: none; white-space: nowrap; }
/* a seller's chat whose offer is held: why no contact exchange yet */
.popup-container.wide .bbp-deal-contacts p.bbp-deal-wait { max-width: 420px; margin: 0 auto; padding: 8px 14px; font: 400 13.5px/1.45 "Inter", system-ui, sans-serif; color: #3b4a54; background: rgba(255, 255, 255, .86); border-radius: 12px; }
/* ---------- the chats' theme as WhatsApp's «Тема чату» (owner 2026-10-17: «додай тему в попапі як у ватсапа»): a theme pairs the wallpaper
   with your bubbles' colour (--tg-out); picked in the settings or from a chat's «⋯ → Тема чатів» (js/bbp-theme.js) ---------- */
/* a sample: two little bubbles on its wallpaper, the other side's white and yours in the theme's colour */
.bbp-wall-pick > button > i { position: absolute; display: block; height: 13px; border-radius: 7px; box-shadow: 0 1px .5px rgba(11, 20, 26, .14); pointer-events: none; }
.bbp-wall-pick > button > .bbp-wp-in { right: 8px; top: 20%; width: 50%; background: #fff; border-bottom-right-radius: 2px; }
.bbp-wall-pick > button > .bbp-wp-out { left: 8px; top: calc(20% + 20px); width: 42%; background: var(--tg-out, #e3fbd1); border-bottom-left-radius: 2px; }
/* the sheet: from the bottom over the chat, which stays in sight above it and changes at a tap */
.bbp-wall-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; background: rgba(11, 20, 26, .16); }
.bbp-wall-sheet-box {
    box-sizing: border-box; width: 100%; max-width: 560px; max-height: 64vh; overflow: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(11, 20, 26, .18); animation: bbp-sheet-up .22s ease-out;
}
@keyframes bbp-sheet-up { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bbp-wall-sheet-box { animation: none; } }
.bbp-wall-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bbp-wall-sheet-head h2 { margin: 0; font: 600 17px/1.3 "Inter", system-ui, sans-serif; color: #111b21; }
.bbp-wall-sheet-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; margin-left: -6px; padding: 0; color: #54656f; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.bbp-wall-sheet-x:hover { background: #f0f2f5; }
.bbp-wall-sheet-hint { margin: 2px 0 0; font: 400 13px/1.45 "Inter", system-ui, sans-serif; color: #667781; }
.bbp-wall-sheet .bbp-wall-pick { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); padding: 6px 5px 5px; }
.bbp-wall-sheet-done { display: block; width: 100%; margin: 14px 0 0; }
/* a computer: a card at the bottom, over the chat's column (--sheet-x, its middle) */
@media (min-width: 992px) {
    .bbp-wall-sheet { justify-content: flex-start; padding-bottom: 24px; }
    .bbp-wall-sheet-box { width: 520px; margin-right: max(16px, calc(var(--sheet-x, 50vw) - 260px)); padding-bottom: 16px; border-radius: 20px; }
}
/* «Тема чатів» in the «⋯»: a row like the others */
.drop-menu .drop > li > button[data-bbp-wall-open] {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 9px 12px; font: 400 14px/1.3 "Inter", system-ui, sans-serif;
    color: var(--bbp-ink); text-align: right; white-space: nowrap; background: transparent; border: 0; border-radius: 10px; cursor: pointer;
}
.drop-menu .drop > li > button[data-bbp-wall-open]:hover { background: #f0f2f5; }
.drop-menu .drop > li > button[data-bbp-wall-open] svg { flex: none; color: #54656f; }
/* the chat's own «⋯» (none came with it): its list right under the button */
.drop-menu.bbp-head-own .drop { min-width: 200px; }

/* ---------- the phone's list white in the light theme too (owner 2026-10-17: «зроби в світлій темі список карточок на мобільній також
   білий»; cream since 2026-10-09), as WhatsApp's: white chats, the fields and the switch's track grey ---------- */
@media (max-width: 991px) {
    html:not([data-theme="dark"]) body.bbp-split,
    html:not([data-theme="dark"]) body.bbp-split #main,
    html:not([data-theme="dark"]) body.bbp-split :is(.bbp-seen-chips, .bbp-contact-chips) { background-color: #fff !important; }
    html.tg-glass:not([data-theme="dark"]) body.bbp-split { --glass-page: #fff; }
    html:not([data-theme="dark"]) body.bbp-split :is(.bbp-seen-chips, .bbp-contact-chips) { box-shadow: 12px 0 0 #fff, -12px 0 0 #fff !important; }
    html:not([data-theme="dark"]) body.bbp-split :is(.bbp-seen-chips, .bbp-contact-chips):is(.bbp-has-more, .bbp-more-right)::after { background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff) !important; }
    html:not([data-theme="dark"]) body.bbp-split :is(.bbp-seen-chips, .bbp-contact-chips).bbp-more-left::before { background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff) !important; }
    html:not([data-theme="dark"]) body.bbp-split :is(.bbp-list-dock, .bbp-req-dock.bbp-home-composer) { background-image: linear-gradient(rgba(255, 255, 255, 0), #fff 22px) !important; }
    /* the field and the photo button: grey, flat (the glass pieces take their colours from these) */
    html.tg-glass:not([data-theme="dark"]) body.bbp-split :is(.bbp-list-dock, .bbp-req-dock.bbp-home-composer) {
        --glass-bg-strong: #f0f2f5; --glass-blur: none; --glass-rim: 0 0 0 0 transparent; --glass-shadow: 0 0 0 0 transparent;
    }
    html.tg-glass:not([data-theme="dark"]) body.bbp-split #header .bbp-headswitch .bbp-mode { background: #f0f2f5 !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
    html.tg-glass:not([data-theme="dark"]) body.bbp-split #header .bbp-headswitch .bbp-mode-btn.is-active { background: #fff !important; box-shadow: 0 1px 3px rgba(11, 20, 26, .16) !important; }
    html.tg-glass:not([data-theme="dark"]) body.bbp-split #header :is(.head-main > .btn-aside, .bbp-headswitch.has-search .bbp-head-search) {
        background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important;
    }
    html:not([data-theme="dark"]) body.bbp-split #header :is(.head-main > .btn-aside, .bbp-headswitch.has-search .bbp-head-search):active { background: #f0f2f5 !important; }
    /* a card that stood white on the cream: a hairline instead */
    html:not([data-theme="dark"]) body.bbp-split .bbp-notify-ask { box-shadow: none !important; border: 1px solid #e9edef !important; }
    html:not([data-theme="dark"]) body.bbp-split .bbp-notify-yes { background: #f0f2f5 !important; }
}
/* the icons keep their own drawing inside a head that paints its svgs (the seller's chat: the palette came out a filled blob) */
.drop-menu .drop > li > button[data-bbp-wall-open] svg { fill: none !important; stroke: currentColor !important; }
.drop-menu.bbp-head-own > a svg { fill: currentColor !important; stroke: none !important; }
/* an open «⋯» on glass: its dots stay dark (they turned white on the white glass) */
html.tg-glass:not([data-theme="dark"]) .popup-content .popup-container.wide[data-wall] .drop-menu.bbp-head-menu.active > a { color: var(--bbp-ink) !important; }
/* a phone: the themes in one row to scroll, as WhatsApp's — the chat stays in sight above the sheet */
@media (max-width: 991px) {
    .bbp-wall-sheet .bbp-wall-pick {
        display: flex; gap: 10px; margin: 10px -16px 0; padding: 6px 16px 8px; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity; scrollbar-width: none;
    }
    .bbp-wall-sheet .bbp-wall-pick::-webkit-scrollbar { display: none; }
    .bbp-wall-sheet .bbp-wall-pick > button { flex: none; width: 76px; scroll-snap-align: start; }
}
/* «Готово» in the logo's blue as every button (owner 2026-10-16); «За категорією» never broken inside the word in a small sample */
.bbp-wall-sheet .bbp-wall-sheet-done:not(#bbp-none) { color: #fff !important; background: #229ed9 !important; border: 0 !important; }
.bbp-wall-sheet .bbp-wall-sheet-done:not(#bbp-none):hover { background: #1a8fc6 !important; }
.bbp-wall-pick > button.is-auto span { font-size: 9.5px; overflow-wrap: normal; word-break: normal; hyphens: none; }
/* «За категорією» in pastels too (owner 2026-10-17: «заміни всі кольорові фони на пастельні»): each section's colours, softened, light theme */
html.tg-wall:not([data-theme="dark"]) [data-wall="sky"] { --w0: #e3eef5; --w1: #cde1ef; --w2: #f0f6fa; --w3: #bed7e9; --w4: #e5f0ee; }
html.tg-wall:not([data-theme="dark"]) [data-wall="mint"] { --w0: #e4f1eb; --w1: #cfe6d9; --w2: #f2f8f4; --w3: #bfddcc; --w4: #e8f2e0; }
html.tg-wall:not([data-theme="dark"]) [data-wall="sand"] { --w0: #f4ebdc; --w1: #edddc2; --w2: #f9f4ea; --w3: #e6d1b4; --w4: #f2e7d5; }
html.tg-wall:not([data-theme="dark"]) [data-wall="leaf"] { --w0: #e7ebd8; --w1: #d1debd; --w2: #f3f4e5; --w3: #c0d2b2; --w4: #e1e2be; }
html.tg-wall:not([data-theme="dark"]) [data-wall="pink"] { --w0: #f7e9ee; --w1: #f0d6df; --w2: #fbf3f6; --w3: #ebc6d5; --w4: #f4e5e0; }
html.tg-wall:not([data-theme="dark"]) [data-wall="lavender"] { --w0: #ebeaf6; --w1: #dbd9ef; --w2: #f6f5fb; --w3: #cbc8e7; --w4: #e8edf6; }
html.tg-wall:not([data-theme="dark"]) [data-wall="wheat"] { --w0: #f2ede3; --w1: #e7dcc9; --w2: #f8f6ef; --w3: #dfcfb7; --w4: #f0eadb; }
html.tg-wall:not([data-theme="dark"]) [data-wall="steel"] { --w0: #e6edf1; --w1: #d3dfe6; --w2: #f2f6f8; --w3: #c4d3dd; --w4: #e8eeec; }
html.tg-wall:not([data-theme="dark"]) [data-wall="peach"] { --w0: #f6eae7; --w1: #f0d9d2; --w2: #fbf4f2; --w3: #e9c8c0; --w4: #f5ebe0; }
html.tg-wall:not([data-theme="dark"]) [data-wall="teal"] { --w0: #e3f1f0; --w1: #cbe5e3; --w2: #f1f8f7; --w3: #b8dad8; --w4: #e5f0e7; }
html.tg-wall:not([data-theme="dark"]) [data-wall="orchid"] { --w0: #f1e9f4; --w1: #e7d6ed; --w2: #f9f4fa; --w3: #ddc6e5; --w4: #f2e8f1; }
html.tg-wall:not([data-theme="dark"]) [data-wall="green"] { --w0: #e6f2e7; --w1: #d1e6d3; --w2: #f3f9f4; --w3: #c0dcc3; --w4: #ebf2e0; }

/* ---------- your bubbles' style, picked in the settings and in «⋯ → Тема чатів» (owner 2026-10-17: «у світлій темі зробимо 2, 4, 6,
   а в темній — ту що зараз і 8»): <html data-out> (light: tg | blue | violet | glass, the cookie bbp_out) and <html data-outd> (dark: night |
   emerald, the cookie bbp_outd), common\services\ChatWall::out()/outDark(). It replaces the themes' own bubble colour (--tg-out). ---------- */
/* 2 «Зелена» (the default): Telegram's light green on every background */
html.tg-wall:not([data-out="blue"]):not([data-out="violet"]):not([data-out="glass"]):not([data-theme="dark"]) .popup-container.wide[data-wall] { --tg-out: #effdde; }
/* 4 «Синя»: the logo's blue, the words white (4.6:1) */
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --tg-out: #1a7cad; }
/* «Фіолетова» (owner 2026-10-20: «і таку хмаринку»): violet, the words white (5.8:1) */
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --tg-out: #5b46f4; }
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] :is(.request-body .text-right .message .inner, .bbp-chat-bubble) {
    background: linear-gradient(-180deg, #1a7cad, #14648c) !important; color: #fff !important;
}
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] :is(.request-body .text-right .message .inner, .bbp-chat-bubble) {
    background: linear-gradient(-180deg, #5b46f4, #4a36e2) !important; color: #fff !important;
}
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] :is(.request-body .text-right .message .inner, .bbp-chat-req > .bbp-chat-bubble)::after { background: #14648c !important; }
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] :is(.request-body .text-right .message .inner, .bbp-chat-req > .bbp-chat-bubble)::after { background: #4a36e2 !important; }
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .request-body .text-right .message .inner :is(.comment, .title, .budget, .name-reviews, .name-reviews *, strong, b, .bbp-dm-seen, .bbp-dm-seen.is-seen) { color: #fff !important; }
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .request-body .text-right .message .inner :is(.comment, .title, .budget, .name-reviews, .name-reviews *, strong, b, .bbp-dm-seen, .bbp-dm-seen.is-seen) { color: #fff !important; }
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .request-body .text-right .message .inner :is(.date, .date *) { color: rgba(255, 255, 255, .82) !important; }
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .request-body .text-right .message .inner :is(.date, .date *) { color: rgba(255, 255, 255, .82) !important; }
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .request-body .text-right .message .inner a:not(.bbp-btn-primary):not(.btn) { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; }
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .request-body .text-right .message .inner a:not(.bbp-btn-primary):not(.btn) { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; }
/* 6 «Скло»: frosted like the chat's head and field, the doodles show through */
html.tg-wall[data-out="glass"]:not([data-theme="dark"]) .popup-container.wide[data-wall] { --tg-out: rgba(226, 243, 253, .55); }
html.tg-wall[data-out="glass"]:not([data-theme="dark"]) .popup-container.wide[data-wall] :is(.request-body .text-right .message .inner, .bbp-chat-bubble) {
    background: rgba(226, 243, 253, .55) !important; filter: none !important;
    -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 1px 2px rgba(0, 0, 0, .08) !important;
}
html.tg-wall[data-out="glass"]:not([data-theme="dark"]) .popup-container.wide[data-wall] :is(.request-body .text-right .message .inner, .bbp-chat-req > .bbp-chat-bubble)::after {
    background: rgba(226, 243, 253, .55) !important; -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
}
html.tg-wall[data-out="glass"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .request-body .text-right .message .inner :is(.date, .date *) { color: #4b5963 !important; }
html.tg-wall[data-out="glass"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .request-body .text-right .message .inner .bbp-dm-seen.is-seen { color: #1a7cad !important; }
/* the themes' samples show your bubble as it is now */
html[data-out="blue"] .bbp-wall-pick > button > .bbp-wp-out { background: #1a7cad !important; }
html[data-out="violet"] .bbp-wall-pick > button > .bbp-wp-out { background: #5b46f4 !important; }
html[data-out="glass"] .bbp-wall-pick > button > .bbp-wp-out { background: rgba(255, 255, 255, .62) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
html:not([data-out="blue"]):not([data-out="violet"]):not([data-out="glass"]) .bbp-wall-pick > button > .bbp-wp-out { background: #effdde !important; }

/* the choice: small bubbles in the colours, as the themes' samples; only the current theme's are shown */
.bbp-out-title { margin: 18px 0 8px; font-size: 15px; font-weight: 600; }
.bbp-out-pick { display: flex; flex-wrap: wrap; gap: 10px; }
html[data-theme="dark"] .bbp-out-pick[data-for="light"], html:not([data-theme="dark"]) .bbp-out-pick[data-for="dark"] { display: none; }
.bbp-out-pick > button {
    display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 92px; margin: 0; padding: 12px 10px 8px;
    font: inherit; font-size: 13px; color: var(--bbp-muted, #5c6166); background: #efeae2; border: 0; border-radius: 14px; cursor: pointer;
}
.bbp-out-pick > button[aria-checked="true"] { color: var(--bbp-ink, #0f1419); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #229ed9; }
.bbp-out-pick > button:focus-visible { outline: 2px solid #229ed9; outline-offset: 3px; }
.bbp-out-pick > button > i {
    position: relative; display: block; padding: 5px 11px; font-style: normal; font-size: 13.5px; line-height: 1.3; color: #0f1419;
    border-radius: 14px 14px 14px 0; filter: drop-shadow(0 1px .5px rgba(0, 0, 0, .14));
}
.bbp-out-pick > button > i::after {
    content: ""; position: absolute; left: -7px; bottom: 0; width: 8px; height: 14px; background: inherit;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath d='M0 0C.5 9.5 4 15.5 10.6 19.3c.6.3.4.7-.2.7H0Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'%3E%3Cpath d='M0 0C.5 9.5 4 15.5 10.6 19.3c.6.3.4.7-.2.7H0Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.bbp-out-pick > button > i.is-tg { background: #effdde; }
.bbp-out-pick > button > i.is-blue { color: #fff; background: #1a7cad; }
.bbp-out-pick > button > i.is-violet { color: #fff; background: #5b46f4; }
.bbp-out-pick > button > i.is-glass { background: rgba(226, 243, 253, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); filter: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bbp-out-pick > button > i.is-night { color: #fff; background: #2b5278; }
.bbp-out-pick > button > i.is-emerald { color: #e9edef; background: #005c4b; }
.bbp-wall-sheet .bbp-out-title { margin-top: 14px; }
/* «Синя»: a review being changed inside its bubble — the choices and buttons white on the blue */
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-own-review .inner > .bbp-crv :is(.bbp-company-ask, .bbp-company-ask *) { color: #fff !important; }
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-own-review .inner > .bbp-crv :is(.bbp-company-ask, .bbp-company-ask *) { color: #fff !important; }
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-own-review .inner > .bbp-crv .bbp-ask-opt:not([aria-pressed="true"]) { color: #fff !important; background: rgba(255, 255, 255, .16) !important; border-color: transparent !important; }
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-own-review .inner > .bbp-crv .bbp-ask-opt:not([aria-pressed="true"]) { color: #fff !important; background: rgba(255, 255, 255, .16) !important; border-color: transparent !important; }
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-own-review .inner > .bbp-crv .bbp-ask-opt[aria-pressed="true"] { color: #14648c !important; background: #fff !important; border-color: #fff !important; }
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-own-review .inner > .bbp-crv .bbp-ask-opt[aria-pressed="true"] { color: #4a36e2 !important; background: #fff !important; border-color: #fff !important; }
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-own-review .inner > .bbp-crv .bbp-crv-form > button:first-of-type { color: #14648c !important; background: #fff !important; border-color: #fff !important; }
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-own-review .inner > .bbp-crv .bbp-crv-form > button:first-of-type { color: #4a36e2 !important; background: #fff !important; border-color: #fff !important; }
html.tg-wall[data-out="blue"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-own-review .inner > .bbp-crv .bbp-crv-form > button + button { color: #fff !important; background: rgba(255, 255, 255, .16) !important; border-color: transparent !important; }
html.tg-wall[data-out="violet"]:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-own-review .inner > .bbp-crv .bbp-crv-form > button + button { color: #fff !important; background: rgba(255, 255, 255, .16) !important; border-color: transparent !important; }
/* the dark theme has its own backgrounds (owner 2026-10-17): only the current theme's samples show */
html[data-theme="dark"] .bbp-wall-pick[data-for="light"], html:not([data-theme="dark"]) .bbp-wall-pick[data-for="dark"] { display: none !important; }
.bbp-wall-pick[data-for="dark"] > button > .bbp-wp-in { background: var(--tg-in, #182533); }
/* more room between the list's cards (owner 2026-10-18: «зроби більші відстані між карточками у списку карточок»): 10px (was 2px);
   on a computer with a chat open, where the list is a narrow column, 6px (was 0) */
#main .request.open-popup.bbp-row + .request.open-popup.bbp-row { margin-top: 10px !important; }
#main .request.open-popup.bbp-row + .request.bbp-row.bbp-note-row { margin-top: 18px !important; }
@media (min-width: 1280px) {
    body.bbp-split:is(:has(.popup-wrapper.active > .popup-content.request.active), :has(.bbp-prepop)) #main .request.open-popup.bbp-row + .request.open-popup.bbp-row { margin-top: 6px !important; }
}
/* the notifications ask: Telegram for a phone without push, when the bot is on (owner 2026-10-18) */
.bbp-notify-ask .t-tg, .bbp-notify-ask .bbp-notify-tg { display: none; }
.bbp-notify-ask.is-tg .t-tg { display: inline; }
.bbp-notify-ask.is-tg :is(.t-push, .t-ios, [data-bbp-ask-yes]) { display: none; }
.bbp-notify-ask.is-tg .bbp-notify-tg { display: inline-flex; align-items: center; text-decoration: none; }
/* the client's photo in a seller's chat head, on a computer too (owner 2026-10-19: «тут постав аватар клієнта і замість залишилось днів
   напиши імя клієнта»; the head's avatar was hidden on computers since 2026-10-05) */
.popup-wrapper .request-head .bbp-head-av:has(.bbp-head-client) { display: inline-flex !important; }
.request-head .bbp-head-av .bbp-head-client { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; font-size: 14px; }
.request-head .bbp-head-av .bbp-head-client img { width: 100%; height: 100%; object-fit: cover; }
/* Telegram's inline buttons under a BlaBlaPrice message (owner 2026-10-19: «кнопки в хмаринках роби як тут»; js/bbp-cards.js, the last
   block): a translucent strip the bubble's width, white words, ↗ for a link to another site; the original buttons stay hidden inside */
.popup-container.wide[data-wall] .blabla-comment > .text :is([data-kb-src], [data-kb-wrap]) { display: none !important; }
.popup-container.wide[data-wall] .blabla-comment > .bbp-kb { display: grid; gap: 4px; box-sizing: border-box; max-width: 100%; margin-top: 4px; }
.popup-container.wide[data-wall] .bbp-kb > .bbp-kb-btn {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 38px; margin: 0; padding: 7px 24px;
    font: 600 14px/1.25 Inter, system-ui, sans-serif; text-align: center; color: #fff; overflow-wrap: anywhere;
    background: #229ed9; border: 0; border-radius: 10px; cursor: pointer; /* the logo's blue (owner 2026-10-19, css.txt; was rgba(24, 104, 150, .78)) */
    -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
}
.popup-container.wide[data-wall] .bbp-kb > .bbp-kb-btn:hover { background: #1a8fc6; }
.popup-container.wide[data-wall] .bbp-kb > .bbp-kb-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.popup-container.wide[data-wall] .bbp-kb > .bbp-kb-btn:disabled { opacity: .55; cursor: default; }
.popup-container.wide[data-wall] .bbp-kb > .bbp-kb-btn.is-link::after { content: "↗"; position: absolute; top: 3px; left: 7px; font-size: 11px; line-height: 1; opacity: .9; }
html[data-theme="dark"] .popup-container.wide[data-wall] .bbp-kb > .bbp-kb-btn { background: rgba(43, 82, 120, .85); }
html[data-theme="dark"] .popup-container.wide[data-wall] .bbp-kb > .bbp-kb-btn:hover { background: rgba(53, 98, 140, .95); }
/* the strip goes under the bubble, not beside it (the BlaBlaPrice line is a flex row), and stays seen in a group's later bubbles */
.popup-container.wide[data-wall] .blabla-comment > .bbp-kb { visibility: visible !important; }
/* the head's avatar on a computer too: the category's in a buyer's chat, the client's in a seller's (owner 2026-10-19: «сюди добав
   аватарку категорії»; hidden on computers since 2026-10-05) */
.popup-wrapper .request-head.has-av .bbp-head-av { display: inline-flex !important; }
/* the contacts a seller gets, as BlaBlaPrice's first bubble of the group (owner 2026-10-19: «зроби з цих повідомлень одну групу хмаринок
   від блаблапрайс, при наведенні на контакти дай підказку…») */
.popup-container.wide[data-wall] .bbp-channels-msg .bbp-buyer-channels {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
    text-align: right !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.popup-container.wide[data-wall] .bbp-channels-msg .bbp-bc-lead { flex: 1 0 100%; margin: 0 0 2px; font-size: inherit; color: inherit !important; }
html:not([data-theme="dark"]) .popup-container.wide[data-wall] .bbp-channels-msg .bbp-bc-chip { color: #111b21 !important; background: #f0f2f5 !important; }
.bbp-bc-chip[data-tip] { position: relative; cursor: help; }
.bbp-bc-chip[data-tip]:focus-visible { outline: 2px solid #229ed9; outline-offset: 2px; }
.bbp-bc-chip[data-tip]:is(:hover, :focus)::after {
    content: attr(data-tip); position: absolute; z-index: 40; right: 0; bottom: calc(100% + 8px); width: max-content; max-width: 240px;
    padding: 7px 10px; font: 500 12.5px/1.35 Inter, system-ui, sans-serif; text-align: right; white-space: normal; color: #fff;
    background: rgba(17, 27, 33, .92); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); pointer-events: none;
}
/* the contacts bubble reads as a message: left, the bubble's own colours (the service line's centre, white and grey are off) */
html.tg-wall .popup-content .popup-container.wide[data-wall] .bbp-channels-msg .bbp-buyer-channels:not(#bbp-none) {
    justify-content: flex-start !important; color: inherit !important; background: none !important; box-shadow: none !important; border-radius: 0 !important;
}
html.tg-wall .popup-content .popup-container.wide[data-wall] .bbp-channels-msg .bbp-bc-lead:not(#bbp-none) { color: inherit !important; text-align: right; }

/* the contacts on top of «Твій хід»: a gap before the words */
html.tg-wall .popup-content .popup-container.wide[data-wall] .bbp-your-move .bbp-buyer-channels:not(#bbp-none) { margin: 0 0 10px !important; }
/* a bubble with the strip: a grid — the avatar at the bubble's bottom left, the bubble beside it, the strip under the bubble (a wrapping flex row put
   the avatar on a line of its own) */
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:has(> .bbp-kb) { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:has(> .bbp-kb)::before { grid-column: 1; grid-row: 1; align-self: start; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:has(> .bbp-kb) > .text { grid-column: 2; grid-row: 1; justify-self: start; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:has(> .bbp-kb) > .bbp-kb { grid-column: 2; grid-row: 2; justify-self: start; }
/* the corners of a run of BlaBlaPrice's bubbles (owner 2026-10-19: «якщо йдуть декілька хмаринок підряд то радіус маленький, на першій
   зверху і останній хмаринці знизу радіус більший, кнопку сприймай як хмаринку»): 6px between them, 16px on top of the first and at the
   bottom of the last; a strip of buttons is the run's next bubble. (A seller's offer in BlaBlaPrice's line keeps its own card.) */
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:not(.bbp-pm-msg) > .text { border-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:not(.bbp-pm-msg):not(.blabla-comment + .blabla-comment) > .text { border-top-right-radius: 16px !important; border-top-left-radius: 16px !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:not(.bbp-pm-msg):not(:has(+ .blabla-comment)):not(:has(> .bbp-kb)) > .text { border-bottom-right-radius: 16px !important; border-bottom-left-radius: 16px !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment > .bbp-kb > .bbp-kb-btn { border-radius: 6px; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:not(:has(+ .blabla-comment)) > .bbp-kb > .bbp-kb-btn:first-child { border-bottom-right-radius: 16px; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:not(:has(+ .blabla-comment)) > .bbp-kb > .bbp-kb-btn:last-child { border-bottom-left-radius: 16px; }
/* BlaBlaPrice's avatar on top of its run again, and the run's first bubble has a tail at its top left, by the avatar (owner 2026-10-19:
   «давай аватар блаблапрайс зверху і хвостик до хмаринки»; it was at the bottom for an hour): only the first bubble of a run shows the
   avatar; a seller's offer in BlaBlaPrice's line has its own */
html.tg-wall .popup-container.wide[data-wall] .blabla-comment { align-items: flex-start !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment.blabla-comment::before { visibility: hidden !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:not(.blabla-comment + .blabla-comment):not(.bbp-pm-msg)::before { visibility: visible !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:not(.bbp-pm-msg):not(.blabla-comment + .blabla-comment) > .text { position: relative; border-top-right-radius: 0 !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:not(.bbp-pm-msg):not(.blabla-comment + .blabla-comment) > .text::after {
    content: "" !important; display: block !important; position: absolute; top: 0; bottom: auto; right: -10px; left: auto; width: 11px; height: 20px;
    background: inherit; pointer-events: none; transform: scale(-1, -1);
    -webkit-mask: var(--tg-tail) no-repeat 0 0 / 100% 100%; mask: var(--tg-tail) no-repeat 0 0 / 100% 100%;
}
/* the offers' divider before «Поки немає персональних пропозицій» goes once an offer is in the chat (it has its own) */
.popup-container:has(.bbp-chat-log .bbp-pm-msg) .bbp-tips-sep { display: none !important; }
/* the run's corners win over the 2026-10-16 rules that carry :not(#bbp-none) (they kept 16px between the bubbles); the first bubble's top
   left is the tail's, square, as every sender's tail corner (owner 2026-10-19: «між хмаринками радіус маленький», «хвостики однакові») */
html.tg-wall .popup-container.wide[data-wall] .blabla-comment.blabla-comment:not(#bbp-none):not(.bbp-pm-msg) > .text { border-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment.blabla-comment:not(#bbp-none):not(.bbp-pm-msg):not(.blabla-comment + .blabla-comment) > .text { border-top-right-radius: 0 !important; border-top-left-radius: 16px !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment.blabla-comment:not(#bbp-none):not(.bbp-pm-msg):not(:has(+ .blabla-comment)):not(:has(> .bbp-kb)) > .text { border-bottom-right-radius: 16px !important; border-bottom-left-radius: 16px !important; }
/* the shadow as the other senders' bubbles have it, a drop-shadow, so it falls under the tail too */
html.tg-wall .popup-container.wide[data-wall] .blabla-comment.blabla-comment:not(#bbp-none):not(.bbp-pm-msg) > .text { box-shadow: none !important; filter: drop-shadow(0 1px .5px rgba(0, 0, 0, .14)); }
/* the points under a price and an offer, in order and without tinted backgrounds (owner 2026-10-19: «давай ще зробимо порядок з таким
   виводом — якісь позначаємо кольором якісь ні», «так само фон треба забрати»): colour only on the marks — ✓ green, ! amber (worth a
   check), ✗ red, ? grey; the words neutral; «Збіг N%» plain */
.bbp-price-fit .is-warn { color: #3b4a54 !important; }
.bbp-price-fit .is-warn > i { color: #c27a12 !important; }
.bbp-price-fit .bbp-fit-match { color: #5c6166; font-weight: 600; }
.bbp-price-fit .is-fold { cursor: help; }
.bbp-offer-match, .bbp-offer-match:is(.is-full, .is-high, .is-low) { height: auto !important; padding: 0 !important; color: #5c6166 !important; background: none !important; }
.bbp-offer-match.is-full::before { content: "✓ "; color: #1e9e4a; }
.bbp-offer-match.is-low::before { content: "! "; color: #c27a12; }
.bbp-rank-best { padding: 0 !important; background: none !important; }
.bbp-price-list .bbp-price-row.is-card.is-open:not(#bbp-none) { background: #fff !important; border-color: var(--bbp-line) !important; }
/* two groups of points (owner 2026-10-19): one mark, then the list, the list wraps under itself */
.bbp-price-fit > :is(.is-yes, .is-no, .is-warn, .is-unknown) { display: flex !important; align-items: baseline; gap: 5px; min-width: 0; max-width: 100%; }
.bbp-price-fit > :is(.is-yes, .is-no, .is-warn, .is-unknown) > i { flex: none; }
/* the room in the chat (owner 2026-10-19: «між кнопками і хмаринками зроби менше простору, а між різними учасниками чату зроби більше
   місця»): 16px between different speakers and round the service pills (was 10px), 4px within one speaker's run as before, 3px
   between a bubble and its buttons (was 9px) */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > *:not(:first-child),
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-deal.is-chat,
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-deal-log > *:not(:first-child) { margin-top: 16px !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) .bbp-deal-log > :first-child { margin-top: 0 !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(
    .text-right + .text-right, .bbp-dmsg.is-mine + .bbp-dmsg.is-mine, .bbp-dmsg.is-theirs + .bbp-dmsg.is-theirs, .blabla-comment + .blabla-comment) { margin-top: 4px !important; }
/* a seller's offer in BlaBlaPrice's line is another speaker */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) :is(.blabla-comment.blabla-comment + .blabla-comment.bbp-pm-msg.bbp-pm-msg, .blabla-comment.bbp-pm-msg.bbp-pm-msg + .blabla-comment.blabla-comment) { margin-top: 16px !important; }
/* the buttons right under their bubble */
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:has(> .bbp-kb) { row-gap: 0 !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment:has(> .bbp-kb) > .text { margin-bottom: 0 !important; }
html.tg-wall .popup-container.wide[data-wall] .blabla-comment > .bbp-kb { margin-top: 3px !important; }
/* a service pill inside a part of the chat (the offers' divider): 16px on both sides, as at the top level (it had 12 + 10 of its own) */
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > * > .request-info.request-info.request-info:first-child { margin-top: 0 !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > * > .request-info.request-info.request-info { margin-bottom: 0 !important; }
html.tg-wall .popup-container.wide[data-wall] .request-body_inner:not(#bbp-none) > * > .request-info + * { margin-top: 16px !important; }
/* «✓ Збіг 100%»: a space after the mark (the badge is a flex box, the space in the content was lost) */
.bbp-offer-match:is(.is-full, .is-low)::before { margin-left: 4px; }
/* the archive button beside the head of a chat with a seller, a glass piece of its own (owner 2026-10-19: «збоку кнопку архіву») */
.request-head > .bbp-head-side { display: flex; align-items: center; flex: none; align-self: center; margin: 0 8px 0 auto; pointer-events: auto; }
.request-head > .bbp-head-side .bbp-archive-btn {
    height: 44px; padding: 0 16px; font: 600 14px/1 Inter, system-ui, sans-serif; color: #1a7cad; white-space: nowrap; cursor: pointer;
    background: var(--glass-bg-strong, rgba(255, 255, 255, .86)); border: 0; border-radius: 22px;
    box-shadow: var(--glass-rim, none), var(--glass-shadow, 0 1px 2px rgba(0, 0, 0, .12));
    -webkit-backdrop-filter: var(--glass-blur, blur(18px)); backdrop-filter: var(--glass-blur, blur(18px));
}
.request-head > .bbp-head-side .bbp-archive-btn:hover { background: #f0f2f5; }
html[data-theme="dark"] .request-head > .bbp-head-side .bbp-archive-btn { color: #89d0f2; }
html[data-theme="dark"] .request-head > .bbp-head-side .bbp-archive-btn:hover { background: rgba(53, 70, 88, .95); }
/* a phone: the head capsule gives way (its title cut with «…») so the archive button and «⋯» fit */
@media (max-width: 991px) {
    html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head.has-av:has(> .bbp-head-side) > .bbp-head-av-row { flex: 0 1 auto !important; min-width: 0 !important; }
    html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head.has-av:has(> .bbp-head-side) .bbp-head-main { min-width: 0; }
    html.tg-glass.tg-wall .popup-content .popup-container.wide[data-wall] .request-head.has-av:has(> .bbp-head-side) :is(.title, .from) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .request-head > .bbp-head-side { margin-left: 56px; }
    .request-head > .bbp-head-side .bbp-archive-btn { padding: 0 14px; }
}
/* one type scale in the chats (owner 2026-10-19: «поправ розмір шрифтів»; sizes ran from 12 to 19px): the words of every message 15px,
   a title inside a bubble 15px semibold, what goes with it 14px, the facts under a price 13px, the times 12px; the head's title 16px.
   The faces stay: people Inter, BlaBlaPrice Inter (2026-10-03) */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) .request-head .title { font-size: 15px !important; line-height: 1.25 !important; }  /* 1px less (owner 2026-10-19: «тут зроби на 1px меншим») */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) .request-head .from { font-size: 13px !important; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) .request-info { font-size: 12.5px !important; }
/* the words of a message */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) :is(.blabla-comment > .text, .blabla-comment > .text p, .message .inner .comment, .bbp-chat-offer .bbp-offer-text, .bbp-chat-offer p, .bbp-chat-req > .bbp-chat-bubble) { font-size: 15px !important; line-height: 1.5 !important; }
/* a title in a bubble, and what goes with it */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) .blabla-comment :is(.bbp-check-title, .bbp-sec-title) { font-size: 15px !important; line-height: 1.4 !important; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) .blabla-comment :is(.bbp-tips-sub, .bbp-check-hint, .bbp-think-text, .bbp-tip-body, .bbp-tip-body p, .bbp-worksteps li, .bbp-move-cost) { font-size: 14px !important; line-height: 1.45 !important; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) .blabla-comment .bbp-timer { font-size: 13px !important; }
/* a price card */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) .bbp-price-list .bbp-price-title { font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) .bbp-price-list .bbp-price-sum { font-size: 15px !important; line-height: 1.35 !important; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) :is(.bbp-price-fit, .bbp-fit-match, .bbp-offer-match, .bbp-offer-why) { font-size: 13px !important; }
/* the buttons */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) :is(.bbp-soft-btn, .bbp-lcard-opt) { font-size: 14px !important; }
/* the times */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) :is(.message .inner .date, .bbp-offer-date, .bbp-dm-time) { font-size: 12px !important; }
/* the facts under a price are a <p> in BlaBlaPrice's bubble: kept at 13px over «the words of a message» */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) .blabla-comment > .text .bbp-price-list .bbp-price-row p.bbp-price-fit.bbp-price-fit { font-size: 13px !important; line-height: 1.4 !important; }
/* BlaBlaPrice's whole message in a <strong> (the thanks after a review, «Дякую за відгук!…»): plain 15px as every message's words (owner
   2026-10-19: «тут також шрифт завеликий»; it was 16px medium) */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-none) .blabla-comment > .text > strong { font-size: 15px !important; font-weight: 400 !important; line-height: 1.5 !important; }
/* one face everywhere: Inter (owner 2026-10-19: «використовуй всюди цей шрифт, бо зараз різні всюди»; people's words were Montserrat,
   BlaBlaPrice's Inter); the old bundle names Montserrat on body, p, a, li and b */
html body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; }
html body :is(p, a, ul li, b) { font-family: inherit; }

/* ---------- the bubbles as Apple's Messages (owner 2026-10-20, variant B of https://claude.ai/artifact/LaNgn1Fh3hH4BPATENEZ5Z:
   «аватарки у всіх хмаринках будуть зверху, і хвостики роби як в смс на епл» → «B, хвостик біля аватарки»): a bubble is round
   at the tail's corner; the tail is iMessage's — it sweeps out of that round corner and curls to a point; the other side's avatar
   and tail stand at the top of its run's first bubble, yours at the bottom of your run's last one. Inside a run the corners stay small
   and BlaBlaPrice's buttons keep theirs, as before (owner the same day: «це поверни як було»). Two #ids outweigh the earlier Telegram
   rules (they carry one); the tails keep the colours those rules give them (inherit, «Синя», «Скло»). ---------- */
html.tg-wall .popup-container.wide[data-wall] {
    --im-tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 0H10.4V7.6A8 8 0 0 0 16 15.23V16H12.8A12.8 11.2 0 0 1 0 4.8Z'/%3E%3C/svg%3E");
}
/* the tail's corner round (Telegram's was square there); the other corners as the earlier rules set them, small inside a run */
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) :is(
    .request-body .text-right .message .inner, .bbp-chat-req > .bbp-chat-bubble, .request-body :not(.text-right) > .message > .box > .inner,
    .bbp-chat-offer, .blabla-comment:not(.bbp-pm-msg) > .text) { position: relative; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) :is(.request-body .text-right .message .inner, .bbp-chat-req > .bbp-chat-bubble) { border-bottom-left-radius: 16px !important; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) :is(.text-right:has(+ .text-right), .bbp-dmsg.is-mine:has(+ .bbp-dmsg.is-mine)) .message .inner { border-bottom-left-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) :is(.request-body :not(.text-right) > .message > .box > .inner, .bbp-chat-offer) { border-bottom-right-radius: 16px !important; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .bbp-dmsg.is-theirs:has(+ .bbp-dmsg.is-theirs) .message > .box > .inner { border-bottom-right-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .blabla-comment:not(.bbp-pm-msg):not(.blabla-comment + .blabla-comment) > .text { border-top-right-radius: 16px !important; }
/* yours: the tail at the bottom right of the run's last bubble */
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) :is(.request-body .text-right .message .inner, .bbp-chat-req > .bbp-chat-bubble)::after {
    content: "" !important; display: block !important; position: absolute !important; top: auto !important; bottom: 0 !important; right: auto !important; left: -6.6px !important;
    width: 19px !important; height: 19px !important; transform: none !important; pointer-events: none;
    -webkit-mask: var(--im-tail) no-repeat 0 0 / 100% 100% !important; mask: var(--im-tail) no-repeat 0 0 / 100% 100% !important;
}
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) :is(.text-right:has(+ .text-right), .bbp-dmsg.is-mine:has(+ .bbp-dmsg.is-mine)) .message .inner::after { display: none !important; }
/* the other side's (BlaBlaPrice, a seller, a buyer): the tail at the top left of the run's first bubble, by the avatar */
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) :is(
    .request-body :not(.text-right) > .message > .box > .inner, .bbp-chat-offer, .blabla-comment:not(.bbp-pm-msg):not(.blabla-comment + .blabla-comment) > .text)::after {
    content: "" !important; display: block !important; position: absolute !important; top: 0 !important; bottom: auto !important; right: -6.6px !important; left: auto !important;
    width: 19px !important; height: 19px !important; transform: scale(-1, -1) !important; pointer-events: none;
    -webkit-mask: var(--im-tail) no-repeat 0 0 / 100% 100% !important; mask: var(--im-tail) no-repeat 0 0 / 100% 100% !important;
}
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .bbp-dmsg.is-theirs + .bbp-dmsg.is-theirs .message > .box > .inner::after { display: none !important; }
/* the avatars on top: beside the first bubble of a run, none beside the next ones */
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .request-body :not(.text-right) > .message > .box { align-items: flex-start !important; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .bbp-dmsg.is-theirs .message > .box > .avatar { visibility: visible !important; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .bbp-dmsg.is-theirs + .bbp-dmsg.is-theirs .message > .box > .avatar { visibility: hidden !important; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .bbp-chat-offer > .bbp-offer-top > .bbp-av { top: 0 !important; bottom: auto !important; }
/* the «Твої хмаринки» samples in the settings and in «⋯ → Тема чатів» have the same tail */
.bbp-out-pick > button > i { border-radius: 14px !important; }
.bbp-out-pick > button > i::after {
    left: -5px; width: 14px; height: 14px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 0H10.4V7.6A8 8 0 0 0 16 15.23V16H12.8A12.8 11.2 0 0 1 0 4.8Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 0H10.4V7.6A8 8 0 0 0 16 15.23V16H12.8A12.8 11.2 0 0 1 0 4.8Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
/* the other side's name over each of its messages in a one-to-one chat: the head already names them, as in Messages (owner 2026-10-20:
   «тут прибери юзера»); the offer, contact and review cards keep the name with the rating */
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .bbp-dmsg.is-theirs .message > .box > .inner > .name-reviews { display: none !important; }
/* two messages in a row: small corners on both sides where they meet, not only on the sender's (owner 2026-10-20: «тут два повідомлення
   підряд, тому радіуси не роби») */
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .bbp-dmsg.is-theirs:has(+ .bbp-dmsg.is-theirs) .message > .box > .inner { border-bottom-left-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .bbp-dmsg.is-theirs + .bbp-dmsg.is-theirs .message > .box > .inner { border-top-left-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) :is(.text-right:has(+ .text-right), .bbp-dmsg.is-mine:has(+ .bbp-dmsg.is-mine)) .message .inner { border-bottom-right-radius: 6px !important; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) :is(.text-right + .text-right, .bbp-dmsg.is-mine + .bbp-dmsg.is-mine) .message .inner { border-top-right-radius: 6px !important; }
/* the read marks in a bubble as Telegram's (owner 2026-10-20: «галочки став дві підряд як в телеграма»): the chat list's own icons —
   ✓ sent, ✓✓ read with the second tick close over the first — drawn in the mark's colour (green, white on «Синя», blue on «Скло»);
   flex: none, or the date's flex row shrinks the textless mark to nothing */
.bbp-dmsg .bbp-dm-seen {
    display: inline-block; flex: none; width: 13px; height: 13px; margin-right: 3px; font-size: 0 !important; line-height: 0; vertical-align: -2px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.bbp-dmsg .bbp-dm-seen.is-seen {
    width: 17px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M1.5 8.5l3 3 6-7M7.6 11.1l.4.4 6-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M1.5 8.5l3 3 6-7M7.6 11.1l.4.4 6-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* the mark's size wins over «.date * { width: auto !important }» of your bubbles (it made the textless mark 0 wide) */
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .bbp-dmsg .bbp-dm-seen { width: 13px !important; height: 13px !important; max-width: none !important; }
/* its baseline at its bottom (overflow hidden): the hidden ✓✓ text had put it at the top, so the mark hung under the time */
.bbp-dmsg .bbp-dm-seen { overflow: hidden; }
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .bbp-dmsg .bbp-dm-seen.is-seen { width: 17px !important; }
/* the name with the rating over the offer and the contacts, and «… залишив відгук» over the review, in a chat with one person: the head
   names them (owner 2026-10-20: «тут також прибери назву»); the request's own talk with several sellers shows them in its offer cards */
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .request-body :not(.text-right) > .message > .box > .inner > .name-reviews,
html.tg-wall .popup-container.wide[data-wall]:not(#bbp-im1):not(#bbp-im2) .message.bbp-their-review > .box > .inner > .bbp-review-head { display: none !important; }
/* the waiting line's two buttons stand in one row, so both end the message and both go to the strip under it (owner 2026-10-20) */
.bbp-tail-btns { display: flex; gap: 6px; margin-top: 10px; }
.bbp-tail-btns > .bbp-soft-btn { flex: 1 1 0; min-width: 0; margin: 0 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* the profile's contact rows as Telegram's (owner 2026-10-20: «краще оформи посилання і телефони щоб було зрозуміліше»): the value in
   the link's blue (a tap calls, writes or opens), under it what it is in grey; a link that leaves the site has ↗; each kind its colour */
.bbp-cl-cap { display: none; }
.tg-wall .bbp-prof .bbp-contact-btn .bbp-cl-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: visible; white-space: normal; }
.tg-wall .bbp-prof .bbp-contact-btn .bbp-cl-main { overflow: hidden; font-size: 15.5px; line-height: 1.3; color: #1a7cad; text-overflow: ellipsis; white-space: nowrap; }
.tg-wall .bbp-prof .bbp-contact-btn .bbp-cl-lbl { display: none; }
.tg-wall .bbp-prof .bbp-contact-btn .bbp-cl-cap { display: block; overflow: hidden; font-size: 12.5px; line-height: 1.3; color: #6d7883; text-overflow: ellipsis; white-space: nowrap; }
.tg-wall .bbp-prof .bbp-contact-btn:is(.is-site, .is-social, .is-telegram, .is-whatsapp, .is-viber) .bbp-cl-main::after { content: " ↗"; font-size: 13px; }
.tg-wall .bbp-prof .bbp-contact-btn:hover .bbp-cl-main { text-decoration: underline; text-underline-offset: 3px; }
.tg-wall .bbp-prof .bbp-contact-btn:hover span:not(.bbp-cl-main) { text-decoration: none; }
.tg-wall .bbp-prof .bbp-contact-btn.is-social svg { background: #5b7bd5; }
/* the seller's name on an offer card is a link to the profile (owner 2026-10-20: «це є посиланням на попап») */
.bbp-pm .bbp-pm-name { cursor: pointer; }
.bbp-pm .bbp-pm-name > b { color: #1a7cad !important; }
.bbp-pm .bbp-pm-name > b::after { content: " ›"; font-weight: 700; }
.bbp-pm .bbp-pm-name:hover > b { text-decoration: underline; text-underline-offset: 3px; }

/* the archive in a chat's head as a checkbox (owner 2026-10-20): an empty square «В архів», ticked blue «В архіві» */
.bbp-archive-btn.is-check { display: inline-flex; align-items: center; gap: 7px; }
.bbp-archive-btn.is-check .bbp-arch-box { flex: none; box-sizing: border-box; width: 17px; height: 17px; border: 2px solid currentColor; border-radius: 5px; transition: background-color .15s, border-color .15s; }
.bbp-archive-btn.is-check[aria-checked="true"] .bbp-arch-box {
    background: #229ed9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
    border-color: #229ed9;
}
@media (prefers-reduced-motion: reduce) { .bbp-archive-btn.is-check .bbp-arch-box { transition: none; } }
/* the site's line icons stay lines under a hovered link (the old theme's «a:hover svg { fill }» filled them dark; owner 2026-10-20:
   «тут ховери на іконках чорні») */
a:hover svg.bbp-icon, a:hover .bbp-icon svg { fill: none !important; }

/* Luna's answers (owner 2026-10-20: «більше гейміфікації», then «ховери менш повітряними, кнопки більш чіткими… замість галочки — як
   загрузка блиском зліва направо»): solid buttons with a fine edge, a hover that only deepens the colour (no lift, no soft shadow), a
   press; the picked one loads while the answer goes: a blue fill grows from the left and a shine runs over it, the others step back;
   the answers come in one by one; the question's number is a badge */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-opt {
    position: relative; overflow: hidden; border-radius: 10px !important; transition: background-color .12s ease, box-shadow .12s ease, color .12s ease, opacity .2s ease;
}
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-opt:not([aria-pressed="true"]) { color: #2a76a3 !important; background: #f1f6fa !important; box-shadow: inset 0 0 0 1px #dbe6ef; }
@media (hover: hover) {
    html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-opt:not([aria-pressed="true"]):hover { color: #1f6a96 !important; background: #e8f0f7 !important; box-shadow: inset 0 0 0 1px #c3d6e6; }
}
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-opt:not([aria-pressed="true"]):active { background: #e0ebf4 !important; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-opt[aria-pressed="true"] { color: #1f6a96 !important; background: #e8f0f7 !important; box-shadow: inset 0 0 0 1px #8fbbdc; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-opt[aria-pressed="true"] > * { position: relative; z-index: 1; }
/* loading the picked answer (the card is .is-sending while it goes): the fill from the left, the shine running over it */
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard.is-sending { opacity: 1; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard.is-sending .bbp-lcard-opt[aria-pressed="true"]::before {
    content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(34, 158, 217, .12); transform-origin: right center; pointer-events: none;
    animation: bbp-opt-load 6s cubic-bezier(.15, .55, .25, 1) forwards;
}
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard.is-sending .bbp-lcard-opt[aria-pressed="true"]::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 45%; z-index: 0; pointer-events: none;
    background: linear-gradient(-100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0));
    animation: bbp-opt-shine 1.6s ease-in-out infinite;
}
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-opts:has(.bbp-lcard-opt[aria-pressed="true"]) .bbp-lcard-opt:not([aria-pressed="true"]) { opacity: .6; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-page.is-ask:not([hidden]) .bbp-lcard-opts > li { animation: bbp-opt-in .2s ease-out both; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-nav > span { padding: 1px 8px; font-weight: 600; color: #5b7184; background: #eef2f5; border-radius: 10px; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-own { transition: box-shadow .12s ease; }
html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-own:focus-within { box-shadow: 0 0 0 1px #8fbbdc; }
@media (hover: hover) { html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard-own:hover:not(:focus-within) { box-shadow: 0 0 0 1px #d3e0ea; } }
@keyframes bbp-opt-in { from { opacity: 0; } }
/* the next question takes a few seconds: the fill goes on all that while and stops short of the end */
@keyframes bbp-opt-load { 0% { transform: scaleX(0); } 25% { transform: scaleX(.45); } 100% { transform: scaleX(.94); } }
@keyframes bbp-opt-shine { from { transform: translateX(110%); } to { transform: translateX(-230%); } }
@media (prefers-reduced-motion: reduce) {
    html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) :is(.bbp-lcard-opt, .bbp-lcard-opts > li) { animation: none !important; transition: none !important; }
    html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard.is-sending .bbp-lcard-opt[aria-pressed="true"]::before { animation: none; }
    html.tg-wall .popup-content .popup-container.wide[data-wall]:not(#bbp-lc) .bbp-lcard.is-sending .bbp-lcard-opt[aria-pressed="true"]::after { display: none; }
}

/* «Свій варіант»: the site's line pencil (the ✎ sign showed as a blue emoji on Windows; owner 2026-10-20: «поправити іконку де свій варіант») */
.bbp-lcard .bbp-lcard-pen { font-size: 0 !important; }
.bbp-lcard .bbp-lcard-pen::before {
    content: ""; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}