/*
 * A category's page as a request's chat (owner 2026-10-27, by his mockup; components/cat-chat.php, site/filter.php .bbp-cc):
 * the chats' wallpaper, the chat's head and steps, an example conversation, Luna's first question, the article as BlaBlaPrice's
 * message and the request field kept at the bottom.
 * Its own file, linked only by that page: logical properties (inline-start/end) so Arabic and Hebrew pages need no mirrored copy,
 * the dark theme under html[data-theme="dark"] here too (ux.css and its generated copies stay untouched).
 */

/* the wallpaper over the whole middle column: the palette and the doodles' tile come from ChatWall (data-wall, --wall-img) */
/* the wallpaper stays where it is while the chat scrolls over it (owner 2026-10-27: «бекграунд також фікседом"): the colours are
   fixed to the screen, the doodles are a sticky layer one screen tall at the block's top (a negative margin keeps it out of the flow) */
.bbp-cc-page { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh;
    background-color: var(--w0, #efe7dd) !important;
    background-image:
        radial-gradient(circle at 10% 16%, var(--w1, transparent) 0, transparent 46%),
        radial-gradient(circle at 90% 10%, var(--w2, transparent) 0, transparent 44%),
        radial-gradient(circle at 84% 88%, var(--w3, transparent) 0, transparent 50%),
        radial-gradient(circle at 14% 86%, var(--w4, transparent) 0, transparent 46%) !important;
    background-attachment: fixed !important; }
.bbp-cc-page::before { content: ""; position: sticky; top: 0; z-index: -1; display: block; height: 100vh; height: 100dvh;
    margin: 0 -20px -100vh; margin-bottom: -100dvh; pointer-events: none; background: var(--wall-ink, rgba(0, 0, 0, .06));
    -webkit-mask: var(--wall-img) 0 0 / 292px 292px repeat; mask: var(--wall-img) 0 0 / 292px 292px repeat; }
.bbp-cc-page .request, .bbp-cc-page .request-main, .bbp-cc-page .bbp-req, .bbp-cc-page .bbp-req-intro, .bbp-cc-page .request-head { background: transparent !important; }
/* the page block is the middle column's whole width (#main scrolls it), the chat keeps its own width inside */
/* (#main is a flex column: the block must not shrink to one screen, or the wallpaper ends there) */
#main > .center.page-filter.bbp-cc-page { flex-shrink: 0 !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 100%; margin: 0 !important; padding: 0 20px !important; }
/* the page's top bar (share) lies on the wallpaper too */
html .bbp-cc-page .request-head, html .bbp-cc-page .request-head > *, html .bbp-cc-page #header,
html[data-theme] .bbp-cc-page .request-head, html[data-theme] .bbp-cc-page .request-head > *, html[data-theme] .bbp-cc-page #header { background: transparent !important; box-shadow: none !important; border: 0 !important; }
/* the right column's first question holds the deal's steps: open to their full height */
.faq .item-accordeon .content-accordeon:has(.bbp-steps-line) { max-height: none !important; height: auto !important; overflow: visible !important; }

/* the sellers' letters in round gradient avatars (the site's seven colours) */
.bbp-cc .bbp-av { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; color: #fff !important;
    font: 700 13px/1 "Inter", system-ui, sans-serif; }
.bbp-cc .bbp-av-0 { background: linear-gradient(135deg, #ff885e, #ff516a) !important; }
.bbp-cc .bbp-av-1 { background: linear-gradient(135deg, #ffcd6a, #ffa85c) !important; }
.bbp-cc .bbp-av-2 { background: linear-gradient(135deg, #82b1ff, #665fff) !important; }
.bbp-cc .bbp-av-3 { background: linear-gradient(135deg, #a0de7e, #54cb68) !important; }
.bbp-cc .bbp-av-4 { background: linear-gradient(135deg, #53edd6, #28c9b7) !important; }
.bbp-cc .bbp-av-5 { background: linear-gradient(135deg, #72d5fd, #2a9ef1) !important; }
.bbp-cc .bbp-av-6 { background: linear-gradient(135deg, #e0a2f3, #d669ed) !important; }

/* the column: the chat's width, the field kept at the bottom */
.bbp-cc { display: flex; flex-direction: column; max-width: 640px; margin-inline: auto; }
.bbp-cc .bbp-req-intro { display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; }
.bbp-cc .bbp-req-intro > * { order: 1; }
.bbp-cc .bbp-cc-art { order: 5; }
.bbp-cc .bbp-req-intro > .bbp-req-dock.is-inline { order: 9; position: sticky !important; bottom: 0; z-index: 4; margin: 0 !important; padding: 14px 0 16px !important;
    background: linear-gradient(to bottom, transparent, var(--w0, #efe7dd) 34%) !important; }

/* the head: the category in a pill in the site's fixed top bar, between the menu button and «share» (guests only,
   components/cat-chat-head.php; owner 2026-10-28) */
#header .head-main > .bbp-cc-head { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; margin: 0 8px; }
.bbp-cc-pill { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 4px 16px 4px 4px; padding-inline: 4px 16px; border-radius: 24px;
    background: rgba(255, 255, 255, .97); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bbp-cc-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #1a7cad; background: #e6f1f8; }
.bbp-cc-pill-txt { display: flex; flex-direction: column; min-width: 0; }
.bbp-cc-head .bbp-cc-name { margin: 0 !important; padding: 0 !important; font: 700 16px/1.3 "Inter", system-ui, sans-serif !important; color: #111417;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbp-cc-crumbs { display: flex; gap: 5px; min-width: 0; font: 500 13px/1.3 "Inter", system-ui, sans-serif; color: #3c4147; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbp-cc-crumbs a { color: inherit !important; }
.bbp-cc-crumbs a:hover { color: #1a7cad !important; }

/* the deal's steps in a card under the head (it scrolls away: a long article keeps the screen) */
.bbp-cc-journey { position: relative; z-index: 3; padding: 2px 14px 10px; border-radius: 14px; background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bbp-cc-journey .bbp-journey { margin: 10px 0 0 !important; }

/* the conversation: the request chats' bubbles (owner 2026-10-28: «хмаринки зроби як у попапах… шрифти і колір тексту чіткими, щоб
   легше читалося»): iMessage's tail from ux.css's chat block — yours at the bottom right, the other side's at the top left by the avatar
   on top — round 16px corners, white incoming bubbles, the chat theme's own colour for yours; the text bigger and in the ink colour */
.bbp-cc { --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"); }
.bbp-cc-feed { display: flex; flex-direction: column; gap: 12px; padding: 22px 0 10px; }
.bbp-cc-feed .bbp-chat-user { margin: 0; }
.bbp-cc-me { position: relative; align-self: flex-end; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 2px 12px;
    max-width: 82%; margin-inline-end: 7px; padding: 9px 14px 7px 16px; border-radius: 16px; background: var(--tg-out, #e3f7d3); box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.bbp-cc-me::after { content: ""; position: absolute; bottom: 0; right: -6.6px; width: 19px; height: 19px; background: inherit; pointer-events: none;
    -webkit-mask: var(--im-tail) no-repeat 0 0 / 100% 100%; mask: var(--im-tail) no-repeat 0 0 / 100% 100%; }
[dir="rtl"] .bbp-cc-me::after { right: auto; left: -6.6px; transform: scaleX(-1); }
.bbp-cc-me-text { font: 400 16.5px/1.45 "Inter", system-ui, sans-serif; color: #111417; white-space: pre-line; overflow-wrap: anywhere; }
.bbp-cc-me-meta { margin-inline-start: auto; font: 600 13px/1.2 "Inter", system-ui, sans-serif; color: #2f8a36; }
/* the bubble's «Уточнити запит»: a link-like button into the request field */
.bbp-cc-refine { padding: 0; border: 0; background: none; cursor: pointer; }
.bbp-cc-refine:hover { text-decoration: underline; }

.bbp-cc-msg { display: flex; align-items: flex-start; gap: 10px; max-width: 100%; }
.bbp-cc-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #1a7cad url("/blabla/img/icon-logo.png?v=3") center / cover no-repeat; }
.bbp-cc-msg > .bbp-av { width: 40px !important; height: 40px !important; font-size: 16px !important; }
.bbp-cc-card { position: relative; min-width: 0; max-width: 520px; margin-inline-start: 6px; padding: 9px 15px 11px; border-radius: 16px; background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.bbp-cc-card::after { content: ""; position: absolute; top: 0; left: -6.6px; width: 19px; height: 19px; background: inherit; transform: scale(-1, -1); pointer-events: none;
    -webkit-mask: var(--im-tail) no-repeat 0 0 / 100% 100%; mask: var(--im-tail) no-repeat 0 0 / 100% 100%; }
[dir="rtl"] .bbp-cc-card::after { left: auto; right: -6.6px; transform: scale(1, -1); }
.bbp-cc-from { display: block; margin-bottom: 3px; font: 700 14px/1.3 "Inter", system-ui, sans-serif; color: #1a7cad; }
.bbp-cc-card p { margin: 0; font: 400 16px/1.5 "Inter", system-ui, sans-serif; color: #111417; }
.bbp-cc-seen-row { display: flex; align-items: center; gap: 9px; font: 500 16px/1.4 "Inter", system-ui, sans-serif; color: #111417; }
.bbp-cc-avs { display: inline-flex; }
.bbp-cc-avs .bbp-av { width: 28px !important; height: 28px !important; font-size: 13px !important; box-shadow: 0 0 0 2px #fff; }
.bbp-cc-avs .bbp-av + .bbp-av { margin-inline-start: -7px; }
/* the article is a long message: the same tail, its own width */
.bbp-cc-art .bbp-cc-card { max-width: none; }
/* the steps' bar: bigger and darker words */
.bbp-cc-journey .bbp-journey li { font-size: 13px !important; color: #3c4147 !important; }
.bbp-cc-journey .bbp-journey li.is-now { color: #111417 !important; font-weight: 600 !important; }

/* Luna's question: a frosted card pinned over the request field (it is printed inside the field's dock), the answers as pills */
.bbp-cc-q { margin: 0 0 8px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .86); box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.bbp-cc-q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bbp-cc-q-head b { font: 700 16.5px/1.35 "Inter", system-ui, sans-serif; color: #111417; }
.bbp-cc-q-num { flex: none; padding: 3px 10px; border-radius: 10px; font: 600 12.5px/1.2 "Inter", system-ui, sans-serif; color: #3c4147; background: #e6e8ea; }
.bbp-cc-q-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.bbp-cc-q-opt, .bbp-cc-q-own { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 14px; border: 0; border-radius: 19px; cursor: pointer;
    font: 600 15px/1.25 "Inter", system-ui, sans-serif; text-align: start; transition: background .15s, color .15s; }
.bbp-cc-q-opt { color: #0f6a99; background: #e3f0f9; }
.bbp-cc-q-opt:hover, .bbp-cc-q-opt.is-on { color: #fff; background: #1a7cad; }
.bbp-cc-q-own { color: #111417; background: #eef0f1; font-weight: 600; }
.bbp-cc-q-own:hover { background: #e6e8ea; }
/* the question takes the detail chips' place */
.bbp-cc .bbp-req-dock:has(.bbp-cc-q) .bbp-suggest { display: none !important; }


/* the article: BlaBlaPrice's long message */
.bbp-cc-art { margin-top: 18px; }
.bbp-cc-art .bbp-cc-card { flex: 1; padding: 12px 20px 18px; }
.bbp-cc-art .bbp-cat-article { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; max-width: none !important; }

/* the request field as a messenger's: one line that grows, the send button beside the text */
.bbp-cc .bbp-composer { display: flex !important; align-items: flex-end; gap: 8px; padding: 6px 8px 6px 18px !important; padding-inline: 18px 8px !important;
    border-radius: 26px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .1) !important; }
.bbp-cc .bbp-composer-opts { display: none !important; }
.bbp-cc .bbp-composer-text { flex: 1; min-width: 0; min-height: 24px !important; margin: 0 !important; padding: 10px 0 !important; line-height: 1.45 !important; }
.bbp-cc .bbp-composer-bar { flex: none; display: flex; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 4px;
    margin: 0 !important; padding: 0 !important; border: 0 !important; }
/* a signed-in visitor's photo button sits beside «send», not on a row of its own */
.bbp-cc .bbp-composer-bar .bbp-req-photo { margin: 0 !important; }
.bbp-cc .bbp-suggest { margin-top: 8px !important; }
.bbp-cc .bbp-suggest-label { color: #4b5157; }
.bbp-cc .bbp-suggest-chip { background: rgba(255, 255, 255, .85) !important; }

@media (max-width: 575px) {
    /* five steps in a phone's row: the words one line each */
    .bbp-cc-journey .bbp-journey li { font-size: 11.5px !important; }
    /* a phone: the answers in one line that scrolls sideways, so the pinned card stays low */
    .bbp-cc-q { padding: 10px 12px; }
    .bbp-cc-q-opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
    .bbp-cc-q-opts::-webkit-scrollbar { display: none; }
    .bbp-cc-q-opt, .bbp-cc-q-own { flex: none; white-space: nowrap; font-size: 15px; }
    .bbp-cc-art .bbp-cc-av { display: none; }
    .bbp-cc-art .bbp-cc-card { padding: 12px 16px 16px; }
}

/* the dark theme: Telegram's night colours on the dark wallpaper */
/* (the light scheme's --w0… stay on the page block: the night ones are --wd0 / --wd-ink, set by site/filter.php from the chosen
   dark background) */
html[data-theme="dark"] .bbp-cc-page { background-color: var(--wd0, #0e1621) !important; background-image: none !important; }
html[data-theme="dark"] .bbp-cc-page::before { background: var(--wd-ink, rgba(255, 255, 255, .05)); }
html[data-theme="dark"] .bbp-cc .bbp-req-intro > .bbp-req-dock.is-inline { background: linear-gradient(to bottom, transparent, var(--wd0, #0e1621) 34%) !important; }
html[data-theme="dark"] .bbp-cc-pill, html[data-theme="dark"] .bbp-cc-journey { background: rgba(23, 33, 43, .92); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); color: #e9edf0 !important; }
html[data-theme="dark"] .bbp-cc-name, html[data-theme="dark"] .bbp-cc-card p, html[data-theme="dark"] .bbp-cc-seen-row, html[data-theme="dark"] .bbp-cc-me-text,
html[data-theme="dark"] .bbp-cc-q-head b, html[data-theme="dark"] .bbp-cc-q-own { color: #e9edf0 !important; }
html[data-theme="dark"] .bbp-cc-ico { background: #22384b; color: #6ab3f3; }
html[data-theme="dark"] .bbp-cc-crumbs { color: #a9b4be; }
html[data-theme="dark"] .bbp-cc-from { color: #6ab3f3 !important; }
html[data-theme="dark"] .bbp-cc-journey .bbp-journey li { color: #a9b4be !important; }
html[data-theme="dark"] .bbp-cc-journey .bbp-journey li.is-now { color: #e9edf0 !important; }
html[data-theme="dark"] .bbp-cc-card { background: var(--tg-in, #182533); box-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .bbp-cc-me { background: #2b5278; }
html[data-theme="dark"] .bbp-cc-me-meta { color: #9fc4e8; }
html[data-theme="dark"] .bbp-cc-avs .bbp-av { box-shadow: 0 0 0 2px #182533; }
html[data-theme="dark"] .bbp-cc-q { background: rgba(23, 33, 43, .82); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .bbp-cc-q-num { color: #a9b4be; background: #22303d; }
html[data-theme="dark"] .bbp-cc-q-opt { color: #6ab3f3; background: #1f3346; }
html[data-theme="dark"] .bbp-cc-q-opt:hover, html[data-theme="dark"] .bbp-cc-q-opt.is-on { color: #fff; background: #2f7fc1; }
html[data-theme="dark"] .bbp-cc-q-own { background: #22303d; }
html[data-theme="dark"] .bbp-cc .bbp-suggest-label { color: #a9b4be; }
html[data-theme="dark"] .bbp-cc .bbp-suggest-chip { background: rgba(23, 33, 43, .85) !important; }