/* The demos' stand (app/demo_stand.py, stand.js): the client's chat on the left, the company's side on the right, in
   the look of the channel the switch names — the site's chat and the desk, Telegram, MAX. The owner (02.10.2026: «не
   очень похоже на Telegram и на MAX… для эффекта полного погружения»): each messenger's chat is drawn as that app draws
   it, with our badge as the bot's avatar, and on a computer (1100 px and wider) each side is a phone in a light frame.
   The site's own channel and everything around the sides are the site's style (brand.css), the company's side drawn as
   the demo cabinet draws it (the owner, 06.10.2026: «измени под наш новый стиль»).
   Where the values come from:
   - Telegram — Telegram Web K's light theme (github.com/morethanwords/tweb: src/scss, src/config/state.ts,
     src/helpers/themeController.ts): the accent #3390ec, the secondary text #707579, the default wallpaper's four
     colours #dbddbb #6ba587 #d5d88d #88b884, bubbles of 15 px with 5 px inside a group, their shadow, 16 px text at
     1.3125, the 12 px time, inline buttons of 40 px rows with 2 px gaps and 6 px corners, the 15 px date chip; the
     outgoing bubble is Telegram's classic #eeffde. The faint doodles of the wallpaper and every icon are our drawing.
   - MAX — web.max.ru's design tokens, light scheme: the white header with a 1 px divider, 600 16/20 title and 12/16
     subtitle, the grounds #f5f7fa and #edeef2, bubbles of 16 px with 6 px stack corners, 16/20 text with 8×10 padding,
     11/14 time, bot buttons of 6 px corners with 500 16/20 words, the white composer card of 16 px with its shadow,
     the accent #007aff, Roboto. The owner asked for MAX calm and light (02.10): no picture on the ground, white
     incoming bubbles with a hairline, the outgoing in a light tint of the accent, light bot buttons with the accent's
     words — MAX's own light grounds and accent, the tint and the buttons' white composed from them.
   Adjusted for reading (WCAG AA, 4.5:1 for words): Telegram's glass under white words over the wallpaper (the buttons
   under a message, the date, the service lines) darkens what it shows through (backdrop brightness 0.6 under a 0.2
   shade: 5:1 over the wallpaper's lightest colour; the app's own 0.4 green gives 2:1); the greys of times and statuses,
   the outgoing times, links and «печатает…» are a shade deeper than the apps'. Text never stands on a wallpaper
   itself: bubbles and chips carry it. */
:root {
  /* Telegram */
  --tg-accent: #3390ec;
  --tg-ink: #000;
  --tg-muted: #707579;
  --tg-link: #2470c2;
  --tg-in: #fff;
  --tg-out: #eeffde;
  --tg-out-meta: #3a7f39;
  --tg-check: #4fae4e;
  /* the glass under white words: a light shade over the wallpaper it darkens (and blurs) */
  --tg-glass: rgba(0, 0, 0, .2);
  --tg-glass-hover: rgba(0, 0, 0, .28);
  --tg-glass-filter: blur(6px) brightness(.6);
  --tg-wall-light: #dbddbb; /* the lightest of the wallpaper: what the glass is checked against */
  --tg-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  /* MAX */
  --max-accent: #007aff;
  --max-accent-ink: #006be0; /* MAX's pressed accent: the accent's words at 5:1 on white */
  --max-ink: #060708;
  --max-muted: rgba(6, 7, 8, .62);
  --max-icon: rgba(6, 7, 8, .64);
  --max-in: #fff;
  --max-out: #e6f2ff; /* the accent at a tenth on white */
  --max-time: rgba(6, 7, 8, .6);
  --max-hairline: rgba(12, 13, 14, .1);
  --max-ground: linear-gradient(180deg, #f5f7fa, #edeef2);
  --max-wall-light: #f5f7fa;
  --max-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* --- the page: the site's style (brand.css; the owner, 06.10.2026: «измени под наш новый стиль») ---------------------
   The words in the brand's sans and the times in its mono, the paper ground, the public pages' buttons and switch, no
   tracked capitals; the page holds one screen of a computer (1280×900 and taller): the mark's bar, the heading with the
   switch, then the two sides at the height that is left (--stand-phone-h). */
.stand-page {
  /* a side's height on a computer: the window less the mark's bar, the heading's row and the steps over the sides — and
     less the test contour's red line, where it stands over the page (app/staging.py BANNER_HTML); from 420 px, so a
     laptop's short window (1366×768 shows some 657 px of page) holds the composers too (the check of 07.10.2026) */
  --stand-phone-h: clamp(420px, calc(100vh - 218px - var(--stand-banner, 0px) - var(--stand-finale, 0px)), 860px);
  max-width: 1240px; margin: 0 auto; padding: 0 24px calc(16px + var(--stand-finale, 0px));
}
body:has(> .staging-banner) .stand-page { --stand-banner: 35px; }
.stand-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The platform's mark over the stand, as the landing's header draws it: the robot, «на связи 24», a hairline and what the
   product is (brand.css); at the right the way back to the company's page, «Начать заново» and, from the show's first
   booking, the free start. A hairline the window's whole width under it, as the landing's (its border-image neither
   scrolls sideways nor clips). */
.stand-brandbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 64px; border-image: linear-gradient(0deg, var(--rule) 1px, var(--paper) 1px) fill 0 / 0 / 0 100vmax; }
.stand-brandbar .brand-lockup { flex: none; }
.stand-brandbar .brand { min-height: 44px; }
.stand-nav { display: flex; align-items: center; gap: 8px 24px; margin-left: auto; }
.stand-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.stand-back:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* the same way back on a phone, under the sides (the mark's bar has room for «Начать заново» alone there) */
.stand-foot { display: none; margin: 0; }
/* «Хочу так же — бесплатно»: the one lime ask, once the show's first booking has reached the company (stand.js) — the
   public pages' button (site.css: corners of 10 px, 600), the size of the landing header's own */
.stand-page .stand-join { border-radius: var(--radius); font-weight: 600; white-space: nowrap; }
.stand-page .stand-join[hidden] { display: none; }
/* The guided show's end (app/demo_stand.py finale_html; the review of 08.10.2026: the three taps ended on the client's
   card with no next step): a forest bar pinned at the window's foot — what the show is for the visitor's business, the
   free start in lime (the screen's one lime ask: the header's steps aside, stand.js) and the set-up in an outline on
   the dark. stand.js shortens the sides by its height (--stand-finale): nothing of the chats goes under it. */
.stand-finale { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--forest); color: var(--on-forest); box-shadow: 0 -8px 28px rgba(12, 41, 30, .18); }
.stand-finale[hidden] { display: none; }
.stand-finale-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; max-width: 1240px; margin: 0 auto; padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)); }
.stand-finale-words { margin: 0; min-width: 0; color: var(--on-forest); font: 600 20px/1.3 var(--sans); letter-spacing: -0.01em; text-wrap: balance; }
.stand-finale-actions { display: flex; flex: none; gap: 12px; }
.stand-page .stand-finale .btn { min-height: 48px; padding: 12px 20px; border-radius: var(--radius); font-size: 16px; font-weight: 600; white-space: nowrap; }
.stand-page .stand-finale .btn.ghost { border-color: rgba(255, 255, 255, .45); color: var(--on-forest); }
.stand-page .stand-finale .btn.ghost:hover { border-color: var(--on-forest); background: rgba(255, 255, 255, .08); }

/* The heading's row: the stand and its company in a calm heading, one line on a computer, and what the stand is under
   it; at the right where the client writes — the landing's switch. A long name wraps between its words, in lines of
   about one length, never wider than the window or under the switch (the check of 07.10.2026: «…«Балтик Мотор» на
   Примерном» held on one line scrolled a phone's page sideways). */
.stand-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 16px 0; }
.stand-title { flex: 1 1 420px; min-width: 0; }
.stand-h1 { margin: 0; color: var(--ink); font: 600 24px/1.2 var(--sans); letter-spacing: -0.01em; text-wrap: balance; }
.stand-lead, .stand-example-status { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.stand-example-status { color: var(--forest); font-weight: 600; }
/* the landing's prepared example says what it does in the lead's place: nothing below moves */
.stand-title:has(.stand-example-status) .stand-lead { display: none; }
.stand-channels { display: flex; align-items: center; gap: 12px; }
.stand-channels-label { color: var(--muted); font-size: 14px; white-space: nowrap; }
/* The landing's switch (site.css .product-switch): one frame of the card's edge, corners of 10 px, halves of 44 px in
   15 px 600 — the chosen one forest with white words. A channel whose bot is not connected stays in its place in muted
   words with the reason under them, never a faded box. The phone's tabs are the same control. */
.stand-switch, .stand-tabs { display: flex; border: 1px solid var(--card-edge); border-radius: var(--radius); background: var(--sheet); }
.stand-page :is(.stand-channel, .stand-tab) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; margin: 0; padding: 0 18px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 600 15px/1.15 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.stand-page .stand-channel { flex-direction: column; gap: 1px; }
.stand-page :is(.stand-channel, .stand-tab) + :is(.stand-channel, .stand-tab) { border-left: 1px solid var(--card-edge); }
.stand-page :is(.stand-channel, .stand-tab):first-child { border-radius: 9px 0 0 9px; }
.stand-page :is(.stand-channel, .stand-tab):last-child { border-radius: 0 9px 9px 0; }
.stand-page :is(.stand-channel, .stand-tab):not([aria-selected="true"]):not(:disabled):hover { background: var(--shade); }
.stand-page :is(.stand-channel, .stand-tab)[aria-selected="true"] { background: var(--forest); color: var(--on-forest); }
.stand-page .stand-channel:disabled { opacity: 1; cursor: not-allowed; }
/* muted, the one not chosen: the chosen one keeps its white words while the landing's example is prepared and the whole
   switch waits (stand.js; the check of 07.10.2026 read grey on forest there) */
.stand-page .stand-channel:disabled:not([aria-selected="true"]) { color: var(--muted); }
.stand-channel small { font-size: 13px; font-weight: 500; line-height: 1.15; }
.stand-page :is(.stand-channel, .stand-tab):focus-visible { position: relative; z-index: 1; outline-offset: 2px; }
/* «Начать заново»: quiet words with their underline and a thumb's 44 px — a new show is not an act of the show */
.stand-page .stand-reset { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 600 15px/1.2 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--faint); text-underline-offset: 5px; white-space: nowrap; cursor: pointer; }
.stand-page .stand-reset:hover { text-decoration-color: var(--ink); }
.stand-tabs { display: none; }
/* a hidden side's news: how many, in mono after the side's name — words, not a badge (the owner: no pill badges; the
   check of 07.10.2026 found a red capsule here) */
.stand-unread { color: var(--forest); font: 700 15px/1.15 var(--mono); font-variant-numeric: tabular-nums; }
/* The toasts' region, always there and empty between them (a polite status). A toast is a white sheet with ink words, its
   edge and a clear shadow, the card's corners: it stands apart from the forest headers it may lie over (the check of
   07.10.2026: a forest toast melted into the cabinet's forest header on a phone). stand.js stands it where it covers
   nothing to press, and every tap goes through it. */
.toasts { position: fixed; top: 12px; left: 50%; z-index: 50; width: max-content; max-width: min(420px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; }
.toasts .toast { padding: 10px 16px; border: 1px solid var(--card-edge); border-radius: var(--card-radius); background: var(--sheet); box-shadow: 0 8px 24px rgba(23, 46, 37, .16); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.35; }
/* a guided show's hint fades as it leaves (stand.js toast) */
.toasts .toast.is-leaving { opacity: 0; transition: opacity .25s; }
@media (prefers-reduced-motion: reduce) { .toasts .toast.is-leaving { transition: none; } }

/* --- the columns: the step and the caption over each side, the phone (or the cabinet's sheet) under them ------------- */
.stand-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.stand-page[data-channel="web"] .stand-columns { grid-template-columns: minmax(300px, 440px) minmax(300px, 1fr); }
.stand-col { display: flex; flex-direction: column; min-width: 0; }
.stand-col[hidden] { display: none; }
/* Over each side its caption: the side in ink, who it is in muted words — sentence case, as the working screens label a
   block (brand.css), never tracked capitals. */
.st-caption { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 4px 0 8px; color: var(--muted); font-size: 14px; line-height: 20px; }
.st-side { flex: none; color: var(--ink); font-weight: 600; }
.st-person { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The show's steps (the owner, 02.10.2026: a prospect opens the stand alone, plays the client and watches the company's
   side come by itself) — text, never a window over the phones: step 1 over the client's column (on a phone over the
   tabs: .stand-step), an empty line of the same height over the company's, step 2 in the company's empty chat. Its
   number in mono, as the landing counts its blocks. Room for two lines where the columns are narrow, one from 1100 px:
   the two sides stand level. */
.st-top { display: flex; align-items: flex-end; min-height: 40px; }
.st-step, .stand-step { margin: 0; min-width: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 20px; }
.st-idx { margin-right: 2px; color: var(--muted); font: 500 14px/20px var(--mono); font-variant-numeric: tabular-nums; }
.stand-step { display: none; }
/* the moment, in the company's chat right under the first booking's notice: a service line as the app draws a day —
   Telegram's chip of glass, MAX's grey capsule, a plain line between hairlines in the cabinet */
.st-arrived { align-self: center; max-width: 92%; margin: 6px 0 2px; text-align: center; }
.st-arrived span { display: inline-block; }
/* over the buttons of the show's first booking notice: the administrator's buttons are there to try, not a task */
.st-optional { margin: 6px 0 2px; }
.st-device { position: relative; min-width: 0; }
.st-screen { position: relative; display: flex; flex-direction: column; min-width: 0; height: clamp(520px, calc(100vh - 240px), 860px); overflow: hidden; border: 1px solid var(--card-edge); border-radius: var(--card-radius); background: var(--sheet); box-shadow: var(--card-shadow); isolation: isolate; }
.st-statusbar, .st-homebar { display: none; }
.st-chat { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .22) transparent; }
.st-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.st-photo { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; margin-bottom: 4px; background: #fff; }
.st-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: #fff; }
/* the brand's ring (brand.css), lime on the cabinet's forest header */
.stand-page .st-screen :focus-visible { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
.stand-page .st-head.desk :focus-visible { outline-color: var(--lime); }

/* --- the messengers: what Telegram and MAX share ----------------------------------------------------------------------- */
.st-screen.tg, .st-screen.max { border-color: #d5dbe1; }
.st-head.tg, .st-head.max { position: relative; z-index: 2; display: flex; align-items: center; flex: none; background: #fff; }
.st-back { display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
/* our badge (mark-badge.svg: the robot alone, inside the zone a circle never cuts), round as the apps crop an avatar,
   with nothing under it */
img.st-avatar { display: block; flex: none; border-radius: 50%; overflow: hidden; object-fit: cover; }
.st-head .st-avatar { width: 40px; height: 40px; }
.st-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-who b, .st-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-who .st-typing:not([hidden]) + .st-status { display: none; }
.st-who .st-typing[hidden] { display: none; }
.st-tools { display: flex; flex: none; }
.st-tools .st-ico { box-sizing: content-box; padding: 8px; }
.st-msg { position: relative; display: flex; flex-direction: column; max-width: min(88%, 440px); }
.st-msg.st-bot { align-self: flex-start; }
.st-msg.st-me { align-self: flex-end; }
.st-msg.has-kb { width: min(88%, 440px); }
.st-msg.has-reply { max-width: min(calc(100% - 50px), 440px); }
.st-msg.has-kb.has-reply { width: min(calc(100% - 50px), 440px); }
.st-bubble { position: relative; min-width: 56px; overflow-wrap: anywhere; }
.st-meta { position: absolute; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; pointer-events: none; }
.st-meta-space { display: inline-block; height: 1px; }
.st-checks { width: 18px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.st-tail { display: none; }
.st-kb { display: grid; }
.st-kb-row { display: flex; min-width: 0; }
.stand-page .st-btn { flex: 1 1 0; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; color: #fff; text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.stand-page .st-btn > .st-ico:not(.st-ico-link) { width: 16px; height: 16px; }
.st-btn .st-ico-link { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; stroke-width: 2.4; }
.stand-page .st-reply-btn { position: absolute; right: -46px; bottom: 0; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer; }
.stand-page .st-reply-btn .st-ico { width: 22px; height: 22px; }
.st-quote { display: flex; flex-direction: column; margin: 2px 0 5px; padding: 3px 8px 4px 9px; border-left: 3px solid; border-radius: 4px; font-size: 14px; line-height: 1.3; overflow: hidden; }
.st-quote b, .st-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-contact-card { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px 0; }
.st-contact-card .st-initial { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: #fff; font-weight: 600; font-size: 18px; background: linear-gradient(#5caffa, #408acf); }
.st-contact-card span { display: flex; flex-direction: column; min-width: 0; }
.st-contact-card b, .st-contact-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-date, .st-note, .st-tapped, .st-empty { align-self: center; max-width: 86%; color: #fff; text-align: center; }
.st-date span { display: inline-block; }
.st-keys { display: grid; flex: none; gap: 6px; }
.st-keys:empty { display: none; }
.stand-page .st-key { display: flex; align-items: center; justify-content: center; min-width: 0; border: 0; text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.st-input.tg, .st-input.max { position: relative; z-index: 1; display: flex; align-items: flex-end; flex: none; }
.stand-page .st-input textarea { flex: 1; min-width: 0; min-height: 0; height: 22px; max-height: 120px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; resize: none; overflow-y: auto; line-height: 22px; }
.stand-page .st-input textarea:focus, .stand-page .st-input textarea:focus-visible { outline: none; box-shadow: none; }
.st-fico { display: grid; place-items: center; flex: none; }
.stand-page .st-send { position: relative; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.st-send .st-ico-send, .st-input.has-text .st-send .st-ico-mic { display: none; }
.st-input.has-text .st-send .st-ico-send { display: block; }
.st-replying-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-replying-text b, .st-replying-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Where the answer arrives (stand.js REPLY_WHERE): a quiet third line, whole */
.st-replying-text .st-replying-where { font-size: 12px; line-height: 16px; opacity: 0.75; }
.stand-page .st-replying-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; font-size: 20px; line-height: 1; }
.stand-page .st-screen .st-replying[hidden] { display: none; }

/* --- Telegram (Web K, light) ---------------------------------------------------------------------------------------------- */
.st-screen.tg { font-family: var(--tg-font); color: var(--tg-ink); background-color: #b9cc9d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300' fill='none' stroke='%231f3d1a' stroke-opacity='.075' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(22 26) rotate(-12 10 10) scale(.82)'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/g%3E%3Cg transform='translate(128 12) scale(.82)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/g%3E%3Cg transform='translate(232 40) rotate(14 10 10) scale(.82)'%3E%3Cpath d='M6 17V11a6 6 0 0 1 12 0v6l2 2H4zM10 21a2.2 2.2 0 0 0 4 0'/%3E%3C/g%3E%3Cg transform='translate(70 116) rotate(-8 10 10) scale(.82)'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.6 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/g%3E%3Cg transform='translate(176 104) rotate(10 10 10) scale(.82)'%3E%3Cpath d='M12 3.5l2.5 5.2 5.6.8-4 4 1 5.6-5.1-2.7-5.1 2.7 1-5.6-4-4 5.6-.8z'/%3E%3C/g%3E%3Cg transform='translate(262 150) rotate(-16 10 10) scale(.82)'%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-7l-5 4v-4H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/g%3E%3Cg transform='translate(18 214) rotate(20 10 10) scale(.82)'%3E%3Ccircle cx='6.5' cy='17.5' r='3'/%3E%3Ccircle cx='17.5' cy='17.5' r='3'/%3E%3Cpath d='M8.6 15.4L19 4M15.4 15.4L5 4'/%3E%3C/g%3E%3Cg transform='translate(122 208) scale(.82)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.2l2.7 2.7L16 9.4'/%3E%3C/g%3E%3Cg transform='translate(220 248) rotate(-10 10 10) scale(.82)'%3E%3Cpath d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(75% 55% at 82% 6%, #dbddbb 0%, rgba(219, 221, 187, 0) 100%),
    radial-gradient(70% 50% at 30% 26%, #6ba587 0%, rgba(107, 165, 135, 0) 100%),
    radial-gradient(80% 55% at 16% 94%, #d5d88d 0%, rgba(213, 216, 141, 0) 100%),
    radial-gradient(70% 55% at 70% 74%, #88b884 0%, rgba(136, 184, 132, 0) 100%); }
.st-head.tg { height: 56px; padding: 0 2px; box-shadow: 0 1px 2px rgba(16, 35, 47, .1); }
.st-head.tg .st-back { color: var(--tg-muted); }
.st-head.tg .st-avatar { margin: 0 12px 0 2px; }
.st-head.tg .st-who b { font-size: 16px; font-weight: 500; line-height: 22px; }
.st-head.tg .st-who small { font-size: 14px; line-height: 18px; color: var(--tg-muted); }
.st-head.tg .st-who .st-typing { color: var(--tg-link); }
.st-head.tg .st-tools { color: var(--tg-muted); }
.st-screen.tg .st-chat { padding: 6px 14px 8px; }
.st-screen.tg .st-msg { margin-top: 2px; }
.st-screen.tg .st-msg.is-first { margin-top: 6px; }
.st-screen.tg .st-bubble { padding: 5px 8px 6px; border-radius: 5px 15px 15px 5px; background: var(--tg-in); box-shadow: 0 1px 2px rgba(16, 35, 47, .15); font-size: 16px; line-height: 1.3125; }
.st-screen.tg .st-bot.is-first .st-bubble { border-top-left-radius: 15px; }
.st-screen.tg .st-bot.is-last .st-bubble { border-bottom-left-radius: 0; }
.st-screen.tg .st-me .st-bubble { border-radius: 15px 5px 5px 15px; background: var(--tg-out); }
.st-screen.tg .st-me.is-first .st-bubble { border-top-right-radius: 15px; }
.st-screen.tg .st-me.is-last .st-bubble { border-bottom-right-radius: 0; }
.st-screen.tg .st-bot.has-kb .st-bubble { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.st-screen.tg .is-last:not(.has-kb) > .st-bubble > .st-tail { display: block; position: absolute; bottom: 0; width: 11px; height: 20px; filter: drop-shadow(0 1px 1px rgba(16, 35, 47, .12)); }
.st-screen.tg .st-bot .st-tail { left: -8.4px; fill: var(--tg-in); }
.st-screen.tg .st-me .st-tail { right: -8.4px; transform: scaleX(-1); fill: var(--tg-out); }
.st-screen.tg .st-text a { color: var(--tg-link); }
.st-screen.tg .st-me .st-text a { color: var(--tg-out-meta); }
.st-screen.tg .st-meta { right: 8px; bottom: 4px; font-size: 12px; line-height: 14px; color: var(--tg-muted); }
.st-screen.tg .st-me .st-meta { color: var(--tg-out-meta); }
.st-screen.tg .st-me .st-checks { color: var(--tg-check); }
.st-screen.tg .st-quote { color: var(--tg-ink); border-color: var(--tg-accent); background: rgba(51, 144, 236, .1); }
.st-screen.tg .st-quote b { color: var(--tg-link); font-weight: 500; }
.st-screen.tg .st-me .st-quote { border-color: var(--tg-check); background: rgba(79, 174, 78, .12); }
.st-screen.tg .st-me .st-quote b { color: var(--tg-out-meta); }
.st-screen.tg .st-contact-card b { font-weight: 500; }
.st-screen.tg .st-contact-card small { color: var(--tg-out-meta); font-size: 14px; }
.st-screen.tg .st-kb { gap: 2px; margin-top: 2px; }
.st-screen.tg .st-kb-row { gap: 2px; }
/* glass over the wallpaper: the buttons under a message, the date, the service lines, «↩» beside a notice */
.stand-page .st-screen.tg .st-btn, .stand-page .st-screen.tg .st-reply-btn, .st-screen.tg .st-date span, .st-screen.tg .st-note,
.st-screen.tg .st-empty, .st-screen.tg .st-optional, .st-screen.tg .st-arrived span { background: var(--tg-glass); -webkit-backdrop-filter: var(--tg-glass-filter); backdrop-filter: var(--tg-glass-filter); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stand-page .st-screen.tg .st-btn, .stand-page .st-screen.tg .st-reply-btn, .st-screen.tg .st-date span, .st-screen.tg .st-note,
  .st-screen.tg .st-empty, .st-screen.tg .st-optional, .st-screen.tg .st-arrived span { background: hsla(100, 30%, 22%, .66); }
}
.stand-page .st-screen.tg .st-btn { min-height: 40px; padding: 9px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.stand-page .st-screen.tg .st-btn:hover, .stand-page .st-screen.tg .st-reply-btn:hover { background: var(--tg-glass-hover); }
.stand-page .st-screen.tg .st-kb-row:last-child .st-btn:first-child { border-bottom-left-radius: 15px; }
.stand-page .st-screen.tg .st-kb-row:last-child .st-btn:last-child { border-bottom-right-radius: 15px; }
/* the bots' coloured buttons (Bot API «style»): Telegram's green, red and blue, deep enough for white words */
.stand-page .st-screen.tg .st-btn.st-success { background: #2f7d32; }
.stand-page .st-screen.tg .st-btn.st-danger { background: #c43c3d; }
.stand-page .st-screen.tg .st-btn.st-primary { background: #2a6fbb; }
.stand-page .st-screen.tg .st-btn.st-success:hover { background: #276b2a; }
.stand-page .st-screen.tg .st-btn.st-danger:hover { background: #a93233; }
.stand-page .st-screen.tg .st-btn.st-primary:hover { background: #235f9f; }
.st-screen.tg .st-date { margin: 8px 0 4px; }
.st-screen.tg .st-date span, .st-screen.tg .st-note, .st-screen.tg .st-empty { padding: 4px 10px; border-radius: 14px; font-size: 14px; font-weight: 500; line-height: 19px; }
.st-screen.tg .st-date span { font-size: 15px; line-height: 20px; }
.st-screen.tg .st-note { margin: 6px 0 2px; padding: 3px 10px; font-size: 13px; font-weight: 400; line-height: 17px; }
.st-screen.tg .st-empty { margin: auto; max-width: 290px; padding: 10px 14px; font-weight: 400; line-height: 1.4; }
.st-screen.tg .st-optional { align-self: flex-start; padding: 3px 10px; border-radius: 14px; color: #fff; font-size: 13px; line-height: 17px; }
.st-screen.tg .st-arrived span { padding: 4px 12px; border-radius: 14px; color: #fff; font-size: 14px; font-weight: 500; line-height: 19px; }
/* the composer over the wallpaper: a white round field with the emoji face and the clip, the round blue button */
.st-input.tg { gap: 6px; padding: 6px 8px 8px; }
.st-input.tg .st-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; min-height: 46px; padding: 0 2px; border-radius: 23px; background: #fff; box-shadow: 0 1px 2px rgba(16, 35, 47, .15); }
.st-input.tg .st-field:focus-within { box-shadow: 0 0 0 2px #1f5fa6; } /* a ring the wallpaper does not swallow */
.st-input.tg .st-fico { width: 40px; height: 46px; color: var(--tg-muted); }
.stand-page .st-input.tg textarea { margin: 12px 0; font-size: 16px; color: var(--tg-ink); }
.stand-page .st-input.tg textarea::placeholder { color: var(--tg-muted); font-size: 16px; }
.stand-page .st-input.tg .st-send { width: 46px; height: 46px; background: var(--tg-accent); color: #fff; box-shadow: 0 1px 2px rgba(16, 35, 47, .15); }
.stand-page .st-input.tg .st-send:hover { background: #2a7fd4; }
.st-screen.tg .st-replying { display: flex; align-items: center; gap: 8px; margin: 0 62px -4px 8px; padding: 6px 4px 8px 10px; border-radius: 14px 14px 0 0; background: #fff; font-size: 14px; line-height: 18px; position: relative; z-index: 1; }
.st-screen.tg .st-replying-text { padding-left: 8px; border-left: 2px solid var(--tg-accent); }
.st-screen.tg .st-replying-text b { color: var(--tg-link); font-weight: 500; }
.st-screen.tg .st-replying-close { color: var(--tg-muted); }
.st-screen.tg .st-replying:not([hidden]) + .st-input .st-field { border-top-left-radius: 0; border-top-right-radius: 0; }
/* the reply keyboard as the phone draws it: under the field, in place of the letters */
.st-screen.tg .st-keys { padding: 8px 6px 10px; background: #e8eaed; border-top: 1px solid #d6d9dd; }
.st-screen.tg .st-keys .st-kb-row { gap: 6px; }
.stand-page .st-screen.tg .st-key { flex: 1 1 0; min-height: 44px; padding: 8px 10px; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .18); color: var(--tg-ink); font-size: 15px; font-weight: 500; line-height: 1.3; }
.stand-page .st-screen.tg .st-key:hover { background: #f4f5f7; }

/* --- MAX (web.max.ru, light): calm, no picture on the ground ----------------------------------------------------------- */
.st-screen.max { font-family: var(--max-font); color: var(--max-ink); letter-spacing: .15px; background: var(--max-ground); }
/* MAX's own header: the arrow back, the badge, the semibold name over the small «Бот», search alone, a hairline under */
.st-head.max { height: 64px; padding: 0 8px 0 4px; border-bottom: 1px solid rgba(12, 13, 14, .06); }
.st-head.max .st-back { color: var(--max-icon); }
.st-head.max .st-avatar { margin: 0 12px 0 0; }
.st-head.max .st-who b { font-size: 16px; font-weight: 600; line-height: 20px; }
.st-head.max .st-who small { font-size: 12px; line-height: 16px; letter-spacing: .3px; color: var(--max-muted); }
.st-head.max .st-who .st-typing { color: var(--max-accent-ink); }
.st-head.max .st-tools { color: var(--max-icon); }
.st-screen.max .st-chat { padding: 8px 12px 10px; }
.st-screen.max .st-msg { margin-top: 2px; }
.st-screen.max .st-msg.is-first { margin-top: 8px; }
.st-screen.max .st-bubble { padding: 8px 10px; border-radius: 16px; background: var(--max-in); box-shadow: 0 0 0 .5px var(--max-hairline), 0 1px 2px rgba(12, 13, 14, .06); font-size: 16px; line-height: 20px; }
.st-screen.max .st-bot:not(.is-last) .st-bubble, .st-screen.max .st-bot.has-kb .st-bubble { border-bottom-left-radius: 6px; }
.st-screen.max .st-bot:not(.is-first) .st-bubble { border-top-left-radius: 6px; }
.st-screen.max .st-me .st-bubble { background: var(--max-out); box-shadow: none; }
.st-screen.max .st-me:not(.is-last) .st-bubble { border-bottom-right-radius: 6px; }
.st-screen.max .st-me:not(.is-first) .st-bubble { border-top-right-radius: 6px; }
.st-screen.max .st-text a { color: var(--max-accent-ink); }
.st-screen.max .st-me .st-text a { color: #0062cc; }
.st-screen.max .st-meta { right: 10px; bottom: 4px; font-size: 11px; line-height: 14px; letter-spacing: .3px; color: var(--max-time); }
.st-screen.max .st-me .st-checks { color: var(--max-accent); }
.st-screen.max .st-quote { color: var(--max-ink); border-color: var(--max-accent); background: rgba(0, 122, 255, .07); border-left-width: 2px; }
.st-screen.max .st-quote b { color: #0062cc; font-weight: 500; }
.st-screen.max .st-contact-card b { font-weight: 500; }
.st-screen.max .st-contact-card small { color: #0062cc; font-size: 14px; }
/* the bot's buttons: light, the accent's words, a hairline */
.st-screen.max .st-kb { gap: 4px; padding-top: 4px; max-width: 384px; }
.st-screen.max .st-kb-row { gap: 4px; }
.stand-page .st-screen.max .st-btn { min-height: 36px; padding: 8px 10px; border: 1px solid rgba(0, 122, 255, .28); border-radius: 6px; background: #fff; color: var(--max-accent-ink); font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: .15px; }
.stand-page .st-screen.max .st-btn:hover { background: #f2f7ff; }
.stand-page .st-screen.max .st-btn .st-ico-link { color: var(--max-accent); }
.stand-page .st-screen.max .st-btn.st-success, .stand-page .st-screen.max .st-btn.st-primary { background: var(--max-accent-ink); border-color: var(--max-accent-ink); color: #fff; }
.stand-page .st-screen.max .st-btn.st-danger { color: #c62b34; border-color: rgba(198, 43, 52, .35); }
.stand-page .st-screen.max .st-reply-btn { background: #fff; color: var(--max-accent-ink); box-shadow: 0 0 0 1px rgba(0, 122, 255, .28); }
.stand-page .st-screen.max .st-reply-btn:hover { background: #f2f7ff; }
.st-screen.max .st-date { margin: 10px 0 2px; }
.st-screen.max .st-date span, .st-screen.max .st-note, .st-screen.max .st-empty { padding: 1px 8px; border-radius: 10px; background: rgba(227, 227, 227, .72); color: #55585c; font-size: 14px; line-height: 18px; }
.st-screen.max .st-note { margin: 8px 0 2px; padding: 2px 8px; font-size: 13px; line-height: 17px; }
.st-screen.max .st-empty { margin: auto; max-width: 290px; padding: 10px 14px; border-radius: 16px; line-height: 1.4; }
.st-screen.max .st-optional { align-self: flex-start; padding: 2px 8px; border-radius: 10px; background: rgba(227, 227, 227, .72); color: #55585c; font-size: 13px; line-height: 17px; }
.st-screen.max .st-arrived span { padding: 2px 10px; border-radius: 10px; background: rgba(227, 227, 227, .72); color: #55585c; font-size: 14px; line-height: 18px; }
/* the composer: the white card of 16 px floating over the chat, the round accent button */
.st-input.max { gap: 2px; margin: 4px 8px 10px; padding: 4px; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .08); }
.st-input.max:focus-within { box-shadow: 0 0 0 2px #0a5bb0, 0 4px 16px rgba(0, 0, 0, .08); }
.st-input.max .st-fico { width: 40px; height: 40px; color: var(--max-icon); }
.stand-page .st-input.max textarea { margin: 9px 4px; font-size: 16px; line-height: 22px; color: var(--max-ink); letter-spacing: .15px; }
.stand-page .st-input.max textarea::placeholder { color: var(--max-muted); font-size: 16px; }
.stand-page .st-input.max .st-send { width: 40px; height: 40px; background: transparent; color: var(--max-icon); }
.stand-page .st-input.max.has-text .st-send { background: var(--max-accent); color: #fff; }
.st-screen.max .st-replying { display: flex; align-items: center; gap: 8px; margin: 4px 8px -12px; padding: 8px 6px 14px 12px; border-radius: 16px 16px 0 0; background: #fff; font-size: 14px; line-height: 18px; position: relative; z-index: 1; }
.st-screen.max .st-replying-text { padding-left: 8px; border-left: 2px solid var(--max-accent); }
.st-screen.max .st-replying-text b { color: var(--max-accent-ink); font-weight: 500; }
.st-screen.max .st-replying-close { color: var(--max-icon); }
.st-screen.max .st-replying:not([hidden]) + .st-input { border-top-left-radius: 0; border-top-right-radius: 0; }
.st-screen.max .st-keys { padding: 8px 8px 10px; background: #fff; border-top: 1px solid rgba(12, 13, 14, .06); }
.st-screen.max .st-keys .st-kb-row { gap: 6px; }
.stand-page .st-screen.max .st-key { flex: 1 1 0; min-height: 44px; padding: 8px 10px; border: 1px solid rgba(0, 122, 255, .28); border-radius: 6px; background: #fff; color: var(--max-accent-ink); font-size: 16px; font-weight: 500; }

/* a pressed button flashes, as the apps answer a tap (the card then changes or the next one comes) */
@keyframes st-press { from { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .34); } to { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0); } }
@keyframes st-press-light { from { box-shadow: inset 0 0 0 999px rgba(0, 122, 255, .16); } to { box-shadow: inset 0 0 0 999px rgba(0, 122, 255, 0); } }
.stand-page .st-screen .st-btn.is-pressed { animation: st-press .7s ease-out; }
.stand-page .st-screen .st-key.is-pressed, .stand-page .st-screen.max .st-btn.is-pressed { animation: st-press-light .7s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .stand-page .st-screen .st-btn.is-pressed, .stand-page .st-screen .st-key.is-pressed { animation: none; filter: brightness(.9); }
}


/* --- the site's channel: the company's side as the demo cabinet draws it (/s/<demo>/desk) ----------------------------
   One white sheet: the cabinet's forest header with the company's name; «Записи клиента» as the cabinet's journal draws
   its visits (the tone's tint and rule at the left, the time in mono); the notices and the answers as the ruled rows of
   the landing's sheets (the time in mono at the left, who it is small and grey over the words); the company chat's
   composer at the foot. The buttons are the working screens' (brand.css): «Подтвердить» forest, «Отклонить» a red
   outline, the others a grey outline — 44 px, corners of 8 px, 14 px 600, their words without pictures (stand.js). */
.st-head.desk { --ink: var(--on-forest); --muted: var(--forest-muted); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; min-height: 60px; padding: 8px 12px 8px 20px; background: var(--forest); color: var(--ink); }
.st-head.desk .st-who b { font: 600 16px/1.3 var(--sans); white-space: normal; }  /* a long name wraps, never cut */
.st-head.desk .st-who small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.st-head.desk .st-open { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 8px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--forest-muted); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.st-head.desk .st-open:hover { text-decoration-color: var(--ink); }
.st-head.desk .st-open .st-ico { width: 16px; height: 16px; }
.st-journal { flex: none; max-height: 36%; overflow-y: auto; padding: 14px 20px 14px; border-bottom: 1px solid var(--rule); scrollbar-width: thin; }
.st-journal h2 { margin: 0 0 8px; color: var(--ink); font: 600 15px/1.3 var(--sans); letter-spacing: 0; }
.st-journal .st-none { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
/* a booking as the cabinet's journal draws a visit: confirmed on the forest rule, waiting on the amber, cancelled on the
   red, each on its tint; the time in mono, then the service, its story (app/demo_stand.py _story), the day and who */
.st-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; row-gap: 1px; align-items: baseline; padding: 8px 12px; border-left: 3px solid var(--forest); border-radius: 3px; background: var(--ok-tint); font-size: 14px; line-height: 1.4; }
.st-row + .st-row { margin-top: 6px; }
.st-row .st-time { grid-row: span 3; color: var(--forest); font: 600 15px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.st-row .st-service { color: var(--ink); font-weight: 600; }
.st-row .st-status { color: var(--ok); font-weight: 500; }
.st-row small { color: var(--muted); font-size: 13px; }
.st-row.is-pending { border-left-color: #b8862a; background: var(--warn-tint); }
.st-row.is-pending .st-status { color: var(--warn); }
.st-row.is-cancelled { border-left-color: var(--error); background: var(--error-tint); }
.st-row.is-cancelled .st-status { color: var(--error); }
.st-row.is-cancelled :is(.st-time, .st-service) { color: var(--muted); text-decoration: line-through; }
/* the notices and the answers: rows of the sheet; step 2 at the top while there are none — a line, not a blank band */
.st-chat.desk { padding: 0 0 4px; background: var(--sheet); }
.st-chat.desk .st-empty { align-self: stretch; max-width: none; margin: 0; padding: 16px 20px 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 20px; text-align: left; }
.st-chat.desk .st-empty-more { margin: 4px 0 0; padding: 0 20px 16px 46px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.st-chat.desk :is(.st-msg, .st-tapped, .st-note) { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-self: stretch; max-width: none; margin: 0; padding: 14px 20px; border-top: 1px solid var(--hair); color: var(--ink); text-align: left; }
.st-chat.desk > :first-child { border-top: 0; }
.st-chat.desk .st-when { color: var(--muted); font: 500 14px/20px var(--mono); font-variant-numeric: tabular-nums; }
.st-chat.desk .st-card .st-when { color: var(--forest); font-weight: 600; }
.st-chat.desk :is(.st-tapped, .st-note) p { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.st-chat.desk .st-body { min-width: 0; }
.st-chat.desk .st-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--muted); font-size: 13px; line-height: 20px; }
.st-chat.desk .st-card-head .st-avatar { width: 24px; height: 24px; }
.st-chat.desk .st-quote { display: block; margin: 0 0 6px; padding: 0 0 0 10px; border-left: 2px solid var(--faint); border-radius: 0; background: none; color: var(--muted); font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-chat.desk .st-text { color: var(--ink); font-size: 15px; line-height: 1.45; white-space: normal; }
.st-chat.desk .st-text p { margin: 0; color: inherit; white-space: pre-line; }
.st-chat.desk .st-text p + p { margin-top: 8px; }
.st-chat.desk .st-text a { color: var(--forest); font-weight: 600; }
/* the administrator's own words: the forest rule at their edge, as the landing marks the owner's own (site.css .you) */
.st-chat.desk .st-me { box-shadow: inset 3px 0 0 var(--forest); }
.st-chat.desk .st-optional { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
/* a guided show's line over its step's one filled button (app/demo_stand.py _guide): the instruction, in forest */
.st-chat.desk .st-hint { color: var(--forest); font-weight: 600; }
.st-chat.desk .st-kb { margin-top: 12px; }
.st-chat.desk .st-optional + .st-kb { margin-top: 8px; }
.st-chat.desk .st-kb-row { flex-wrap: wrap; gap: 8px; }
.stand-page .st-chat.desk :is(.st-btn, .st-reply-btn) { position: static; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: auto; min-height: var(--control-h); padding: 9px 16px; border: 1px solid var(--faint); border-radius: var(--control-radius); background: var(--sheet); box-shadow: none; color: var(--ink); font: 600 14px/1.3 var(--sans); text-align: center; text-decoration: none; opacity: 1; overflow-wrap: normal; }
.stand-page .st-chat.desk :is(.st-btn, .st-reply-btn):hover { border-color: var(--forest); background: var(--shade); }
.stand-page .st-chat.desk .st-btn:is(.st-success, .st-primary) { border-color: var(--forest); background: var(--forest); color: var(--on-forest); }
.stand-page .st-chat.desk .st-btn:is(.st-success, .st-primary):hover { border-color: var(--forest-deep); background: var(--forest-deep); }
.stand-page .st-chat.desk .st-btn.st-danger { border-color: var(--error-edge); background: transparent; color: var(--error); }
.stand-page .st-chat.desk .st-btn.st-danger:hover { border-color: var(--error); background: var(--error-tint); }
.st-chat.desk .st-btn .st-ico { width: 16px; height: 16px; }
/* the moment: a plain line between two hairlines, its sentence in forest — the header's free start is the one lime */
.st-chat.desk .st-arrived { display: flex; align-items: center; gap: 12px; align-self: stretch; max-width: none; margin: 0; padding: 2px 20px 14px; }
.st-chat.desk .st-arrived::before, .st-chat.desk .st-arrived::after { content: ""; flex: 1 1 24px; height: 1px; background: var(--rule); }
.st-chat.desk .st-arrived span { flex: 0 1 auto; color: var(--forest); font-size: 14px; font-weight: 600; line-height: 1.4; }
.st-screen.desk .st-typing { flex: none; padding: 4px 20px; background: var(--sheet); color: var(--muted); font-size: 13px; }
.st-screen.desk .st-typing[hidden] { display: none; }
/* the answer's strip over the composer: whom it goes to, the notice's first line, where the client reads it */
.st-screen.desk .st-replying { display: flex; align-items: center; gap: 12px; flex: none; padding: 6px 8px 6px 20px; border-top: 1px solid var(--rule); background: var(--shade); box-shadow: inset 3px 0 0 var(--forest); font-size: 14px; line-height: 1.35; }
.st-screen.desk .st-replying-text b { font-weight: 600; }
.st-screen.desk .st-replying-text .st-replying-where { color: var(--muted); font-size: 13px; line-height: 1.35; opacity: 1; }
.stand-page .st-screen.desk .st-replying-close { width: 44px; height: 44px; border-radius: var(--control-radius); color: var(--ink); }
.stand-page .st-screen.desk .st-replying-close:hover { background: var(--sheet); }
.st-screen.desk .st-replying-close .st-ico { width: 20px; height: 20px; }
/* the composer of the company's chat (business.css): the field on the paper with corners of 10 px, the forest square */
.st-input.desk { display: flex; align-items: flex-end; gap: 8px; flex: none; padding: 10px 12px 12px 20px; border-top: 1px solid var(--rule); background: var(--sheet); }
.stand-page .st-input.desk textarea { flex: 1; min-width: 0; height: 44px; min-height: 44px; max-height: 120px; margin: 0; padding: 11px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); box-shadow: none; color: var(--ink); font: 400 15px/20px var(--sans); resize: none; overflow-y: auto; }
.stand-page .st-input.desk textarea::placeholder { color: var(--muted); }
.stand-page .st-input.desk textarea:focus, .stand-page .st-input.desk textarea:focus-visible { outline: none; border-color: var(--forest); background: var(--sheet); box-shadow: 0 0 0 3px var(--hi); }
.stand-page .st-input.desk .st-send { width: 44px; height: 44px; border-radius: var(--radius); background: var(--forest); color: var(--on-forest); }
.stand-page .st-input.desk .st-send:hover { background: var(--forest-deep); }
.st-input.desk .st-send .st-ico { width: 20px; height: 20px; stroke-width: 2.4; }

/* --- a computer: each messenger's side a phone in a light frame, the cabinet's sheet as tall as the phone ------------- */
@media (min-width: 1100px) {
  /* step 1 in one line over the phone of 412 px, so the two sides stand level */
  .st-top { min-height: 20px; }
  .st-step { font-size: 14px; white-space: nowrap; }
  .stand-columns, .stand-page[data-channel="web"] .stand-columns { grid-template-columns: 412px 412px; justify-content: center; column-gap: clamp(40px, 6vw, 96px); }
  .stand-page[data-channel="web"] .stand-columns { grid-template-columns: 412px minmax(0, 1fr); justify-content: stretch; column-gap: 32px; }
  .st-device { height: var(--stand-phone-h); padding: 9px; border-radius: 44px; background: linear-gradient(150deg, #fbfbfc, #e7eaee 60%, #f3f4f6); box-shadow: inset 0 0 0 1px #cfd4da, inset 0 0 0 3px #f7f8f9, var(--card-shadow); }
  .st-device::before, .st-device::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: #d3d7dc; }
  .st-device::before { right: -3px; top: 150px; height: 64px; }
  .st-device::after { left: -3px; top: 120px; height: 92px; }
  .st-device .st-screen { height: 100%; border: 0; border-radius: 36px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
  .stand-col.is-desk .st-screen { height: var(--stand-phone-h); }
  .st-device .st-statusbar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex: none; height: 30px; padding: 2px 22px 0 28px; background: #fff; color: #000; font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: .2px; }
  .st-statusbar .st-camera { position: absolute; left: 50%; top: 8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #16181b; box-shadow: inset 0 0 0 3px #26292d; }
  .st-statusbar .st-sys { display: flex; align-items: center; gap: 5px; }
  .st-statusbar svg { display: block; height: 12px; fill: currentColor; }
  .st-statusbar .st-sig { width: 18px; }
  .st-statusbar .st-wifi { width: 16px; }
  .st-statusbar .st-batt { width: 25px; }
  .st-device .st-homebar { display: block; position: absolute; z-index: 4; left: 50%; bottom: 6px; width: 112px; height: 4px; margin-left: -56px; border-radius: 2px; background: rgba(0, 0, 0, .78); pointer-events: none; }
  .st-device .st-screen.web .st-homebar { position: static; flex: none; width: auto; height: 18px; margin: 0; border-radius: 0; background: #fff; }
  .st-device .st-screen.web .st-homebar::after { content: ""; display: block; width: 112px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: rgba(0, 0, 0, .78); }
  .st-device .st-input.tg { padding-bottom: 20px; }
  .st-device .st-screen.has-keys .st-input.tg { padding-bottom: 8px; }
  .st-device .st-screen.has-keys .st-keys { padding-bottom: 22px; }
  .st-device .st-input.max { margin-bottom: 20px; }
  .st-device .st-screen.has-keys .st-input.max { margin-bottom: 8px; }
}
/* A narrow computer: the mark's words step aside before the bar's row needs a second line — with «ИИ-администратор
   и сайт для записи клиентов» (08.10.2026) and the free start beside them, from 1 240 px with room to spare (at 1 180 px
   they left 9 px). */
@media (max-width: 1239px) {
  .stand-brandbar .brand-desc { display: none; }
}
/* A tablet: the free start, when it comes, on a line of its own under the links, at the right — the mark, the way back
   and «Начать заново» leave it no room beside them (the check of 07.10.2026: at 761 px it ran past the window's edge);
   the cabinet's header keeps the company's name whole, the whole journal is a computer's. */
@media (min-width: 761px) and (max-width: 900px) {
  .stand-brandbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .stand-nav { display: contents; }
  .stand-brandbar .stand-back { justify-self: end; }
  .stand-page .stand-join { grid-column: 1 / -1; justify-self: end; margin: 0 0 10px; }
  .st-head.desk .st-open { display: none; }
}

/* --- a phone: a short header, the columns are tabs, each side takes the screen from edge to edge ---------------------- */
@media (max-width: 760px) {
  .stand-page { padding: 0 16px calc(16px + var(--stand-finale, 0px)); }
  /* the mark and «Начать заново» on one line (the way back to the company's page is the browser's own here); the free
     start, when it comes, on a line of its own under them */
  .stand-brandbar { flex-wrap: wrap; min-height: 56px; gap: 0 12px; }
  .stand-brandbar .brand { font-size: 21px; }
  .stand-nav { display: contents; }
  .stand-brandbar .stand-back { display: none; }
  .stand-page .stand-reset { margin-left: auto; }
  .stand-foot { display: block; margin: 8px 0 0; }
  .stand-page .stand-join { flex: 1 1 100%; margin: 0 0 10px; }
  /* the heading in short lines, the switch across the row under it */
  .stand-bar { gap: 12px; padding: 8px 0 12px; }
  .stand-title { flex-basis: 100%; }
  .stand-h1 { font-size: 17px; line-height: 1.25; }
  .stand-lead, .stand-example-status { margin-top: 2px; font-size: 14px; }
  .stand-channels { flex: 1 1 100%; min-width: 0; }
  .stand-channels-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stand-switch, .stand-tabs { flex: 1 1 auto; }
  .stand-page :is(.stand-channel, .stand-tab) { flex: 1 1 0; padding: 0 10px; }
  .stand-columns, .stand-page[data-channel="web"] .stand-columns { display: block; }
  .stand-tabs { display: flex; margin: 0 0 8px; }
  /* only the two tabs over the chat (the owner, 02.10): step 1 stands over the tabs, the tabs name the sides */
  .st-caption, .st-top { display: none; }
  .stand-step { display: block; margin: 0 0 10px; }
  .st-device, .stand-col.is-desk .st-screen { margin: 0 -16px; }
  .st-device .st-screen, .stand-col.is-desk .st-screen { height: calc(100vh - 84px - var(--stand-finale, 0px)); height: calc(100svh - 84px - var(--stand-finale, 0px)); min-height: max(400px, calc(460px - var(--stand-finale, 0px))); border-width: 1px 0; border-radius: 0; box-shadow: none; }
  /* the guided show's bar: the words over the two buttons, side by side — one under the other on a narrower phone */
  .stand-finale-in { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .stand-finale-words { font-size: 16px; }
  .stand-finale-actions { flex-wrap: wrap; gap: 8px; }
  .stand-finale-actions .btn { flex: 1 1 auto; }
  .stand-page .stand-finale .btn { min-height: 44px; padding: 10px 12px; font-size: 15px; }
  .st-msg.has-kb, .st-msg { max-width: 92%; }
  .st-msg.has-kb { width: 92%; }
  .st-msg.has-reply { max-width: calc(100% - 48px); }
  .st-msg.has-kb.has-reply { width: calc(100% - 48px); }
  /* the cabinet on a phone: narrower margins and time column; the whole journal is the computer's */
  .st-head.desk { min-height: 56px; padding: 6px 16px; }
  .st-head.desk .st-open { display: none; }
  .st-journal { padding: 12px 16px; }
  .st-row { grid-template-columns: 46px minmax(0, 1fr); column-gap: 10px; padding: 8px 10px; }
  .st-chat.desk :is(.st-msg, .st-tapped, .st-note) { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; padding: 12px 16px; }
  .st-chat.desk .st-empty { padding: 14px 16px 0; }
  .st-chat.desk .st-empty-more { padding: 0 16px 14px 42px; }
  .st-chat.desk .st-arrived { padding: 2px 16px 12px; }
  .st-screen.desk .st-replying { padding-left: 16px; }
  .st-input.desk { padding: 8px 12px 10px 16px; }
  .stand-page .st-input.desk textarea { font-size: 16px; }  /* a phone's browser does not zoom into a field of 16 px */
}
/* the narrowest phones: the switch's words a step smaller */
@media (max-width: 359px) {
  .stand-page :is(.stand-channel, .stand-tab) { padding: 0 6px; font-size: 14px; }
}