/* Виджет чата POP EAT.
   Лежит в public/, потому что его подключает и сайт (Astro), и статический
   калькулятор — там токенов дизайн-системы пока нет. Поэтому каждый var()
   идёт со своим значением по умолчанию: на сайте выигрывают токены, на
   калькуляторе работают запасные. Хексы здесь — не обход контракта, а копии
   токенов на случай их отсутствия.

   Прямых углов нет нигде: кнопки и поле — pill, пузыри — 2xl, панель — lg. */

.pchat {
  --pchat-magenta: var(--brand-magenta, #e8156b);
  --pchat-magenta-hover: var(--action-primary-hover, #cf0f5d);
  --pchat-navy: var(--brand-navy, #1f2c86);
  --pchat-ink: var(--ink-900, #1a1330);
  --pchat-muted: var(--ink-500, #736b93);
  --pchat-cream: var(--brand-cream, #fbf3e4);
  --pchat-wa: var(--whatsapp, #25d366);
  --pchat-radius: var(--radius-lg, 28px);
  --pchat-bubble: var(--radius-md, 18px);
  --pchat-pill: var(--radius-pill, 999px);
  --pchat-ease: var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1));
  --pchat-dur: var(--dur-base, 240ms);
  --pchat-ring: var(--ring-focus, 0 0 0 4px rgba(232, 21, 107, .30));
  --pchat-font: var(--font-ui, 'Fredoka', 'Nunito', system-ui, sans-serif);

  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 45;
  font-family: var(--pchat-font);
}

/* Кнопка запуска стоит слева и остаётся навигационной, а не денежной:
   WhatsApp справа — это бронь, чат — справка, и спорить им незачем. */
.pchat__launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--pchat-pill);
  background: var(--pchat-navy);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(26, 19, 48, .10), 0 5px 0 rgba(0, 0, 0, .18);
  transition: transform var(--pchat-dur) var(--pchat-ease),
              box-shadow var(--pchat-dur) var(--pchat-ease),
              background-color var(--pchat-dur) var(--pchat-ease);
}
.pchat__launch:hover { transform: translateY(-3px); background: #182367; }
.pchat__launch:active { transform: scale(.96) translateY(2px); box-shadow: 0 3px 0 rgba(0, 0, 0, .16); }
.pchat__launch:focus-visible { outline: none; box-shadow: var(--pchat-ring), 0 5px 0 rgba(0, 0, 0, .18); }
.pchat__launch-icon { flex: none; }

.pchat[data-open] .pchat__launch { display: none; }

/* Сторона выбирается по странице, а не раз и навсегда: на сайте справа висит
   плавающий WhatsApp, и чат уходит влево; на калькуляторе WhatsApp нет, зато
   слева стоит кнопка «Назад» — там чат встаёт справа. Решает chat.js. */
.pchat[data-side="right"] { left: auto; right: 20px; }
@media (max-width: 480px) {
  .pchat[data-side="right"] { left: 16px; right: 16px; }
  .pchat[data-side="right"] .pchat__launch { margin-left: auto; display: flex; }
}

/* --- панель --- */
.pchat__panel {
  display: none;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: var(--pchat-radius);
  box-shadow: 0 18px 44px rgba(26, 19, 48, .16);
  animation: pchat-in var(--dur-slow, 420ms) var(--pchat-ease);
}
.pchat[data-open] .pchat__panel { display: flex; }

@keyframes pchat-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

.pchat__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 2px dashed rgba(31, 44, 134, .18);
}
.pchat__title {
  margin: 0;
  font-family: var(--font-display, 'Baloo 2', 'Nunito', system-ui, sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--pchat-navy);
}
.pchat__note { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--pchat-muted); }
.pchat__close {
  margin-left: auto;
  flex: none;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--pchat-cream);
  color: var(--pchat-navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--pchat-dur) var(--pchat-ease);
}
.pchat__close:hover { transform: scale(1.03); }
.pchat__close:active { transform: scale(.96) translateY(2px); }
.pchat__close:focus-visible { outline: none; box-shadow: var(--pchat-ring); }

.pchat__log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}

/* Радиус пузыря намеренно небольшой (18px, не 56px): при 56px закругление
   съедало угол строки, и на узком экране текст ложился на край заливки.
   Отступы подняты до 12/16 — с крупным радиусом воздуха не хватало. */
.pchat__msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--pchat-bubble);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pchat__msg--bot { align-self: flex-start; background: var(--pchat-cream); color: var(--pchat-ink); }
.pchat__msg--user { align-self: flex-end; background: var(--pchat-magenta); color: #fff; }
.pchat__msg--error { align-self: flex-start; background: rgba(232, 21, 107, .08); color: var(--pchat-ink); }

/* Ожидание ответа: подпись и рука с пером, которая ведёт строку. Движется
   только глиф внутри пузыря — если крутить сам кружок, вместе с ним поедет
   его инсет-тень и пузырь перестанет быть пузырём. overflow:hidden держит
   руку внутри кружка на краях хода. */
.pchat__typing { display: flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 13px; color: var(--pchat-muted); padding: 0 8px; }
.pchat__pen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--bubble-inset-sm, inset 0 -4px 7px rgba(0, 0, 0, .16), inset 0 4px 7px rgba(255, 255, 255, .55));
}
.pchat__pen-glyph {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 14px;
  line-height: 1;
  animation: pchat-write 1.15s ease-in-out infinite;
}
@keyframes pchat-write {
  0%   { transform: translate(-3px, 1px) rotate(-10deg); }
  25%  { transform: translate(0, -1px) rotate(0deg); }
  50%  { transform: translate(3px, 1px) rotate(9deg); }
  75%  { transform: translate(0, -1px) rotate(0deg); }
  100% { transform: translate(-3px, 1px) rotate(-10deg); }
}

/* Кнопки ухода: WhatsApp — живой человек, калькулятор — точная сумма. */
.pchat__exits { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; }
.pchat__exit {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--pchat-pill);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--pchat-dur) var(--pchat-ease);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .16);
}
.pchat__exit:hover { transform: translateY(-3px); }
.pchat__exit:active { transform: scale(.96) translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .16); }
.pchat__exit:focus-visible { outline: none; box-shadow: var(--pchat-ring), 0 3px 0 rgba(0, 0, 0, .16); }
.pchat__exit--wa { background: var(--pchat-wa); color: #fff; }
.pchat__exit--calc { background: var(--pchat-navy); color: #fff; }

.pchat__quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.pchat__chip {
  min-height: 36px;
  padding: 0 14px;
  border: 2px solid rgba(31, 44, 134, .18);
  border-radius: var(--pchat-pill);
  background: #fff;
  color: var(--pchat-navy);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--pchat-dur) var(--pchat-ease), border-color var(--pchat-dur) var(--pchat-ease);
}
.pchat__chip:hover { transform: translateY(-3px); border-color: var(--pchat-magenta); }
.pchat__chip:active { transform: scale(.96) translateY(2px); }
.pchat__chip:focus-visible { outline: none; box-shadow: var(--pchat-ring); }

.pchat__form { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 2px dashed rgba(31, 44, 134, .18); }
.pchat__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--pchat-pill);
  background: #fff;
  color: var(--pchat-ink);
  font-family: inherit;
  font-size: 14px;
  /* Границу рисует внутренняя тень: фокус утолщает её, не двигая раскладку. */
  box-shadow: inset 0 0 0 2px rgba(31, 44, 134, .18);
}
.pchat__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--pchat-magenta), var(--pchat-ring); }
.pchat__input::placeholder { color: var(--pchat-muted); }

.pchat__send {
  flex: none;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--pchat-magenta);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .18);
  transition: transform var(--pchat-dur) var(--pchat-ease), background-color var(--pchat-dur) var(--pchat-ease);
}
.pchat__send:hover:not(:disabled) { transform: translateY(-3px); background: var(--pchat-magenta-hover); }
.pchat__send:active:not(:disabled) { transform: scale(.96) translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.pchat__send:focus-visible { outline: none; box-shadow: var(--pchat-ring), 0 5px 0 rgba(0, 0, 0, .18); }
.pchat__send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

@media (max-width: 480px) {
  .pchat { left: 16px; right: 16px; bottom: 16px; }
  /* На телефоне кнопка чата не должна налезать на плавающий WhatsApp справа. */
  .pchat__launch { max-width: calc(100% - 76px); }
  .pchat__panel { width: 100%; height: min(70vh, calc(100vh - 100px)); }
}

@media (prefers-reduced-motion: reduce) {
  .pchat__panel { animation-duration: 1ms; }
  .pchat *,
  .pchat *::before { transition-duration: 1ms !important; }
  .pchat__launch:hover,
  .pchat__exit:hover,
  .pchat__chip:hover,
  .pchat__send:hover:not(:disabled) { transform: none; }
  /* Рука замирает, но остаётся на месте: знак ожидания важнее анимации. */
  .pchat__pen-glyph { animation: none; }
}

/* ============ Маскот: мишка в мыльном пузыре и облачко ====================
   Владелец, 04.09.2026, второй заход. Мишка вдвое меньше прежнего и плавает
   в полупрозрачном пузыре, который переливается радугой, как мыльный на
   солнце. Облачко-кнопка стоит НАД его головой, хвостиком вниз, и открывает
   чат не только оно: по самому мишке тычут в первую очередь, он жмётся тоже.

   Два сознательных отступления от контракта, оба по прямой просьбе владельца:
   блюр здесь четвёртый по счёту (разрешены хедер, подпись галереи, модалка) и
   перелив зациклен. Остальное по контракту: цвета --pop-* как цикличный
   акцент, состояния hover/press на месте, при reduced-motion всё замирает.

   Всё ниже — только от 941 px, то есть там же, где у сайта десктопная
   раскладка. На телефоне кнопка запуска и так спрятана, а сбоку нет места.
   Цвета — пара «токен, запасной хекс», как во всём этом файле: виджет
   подключает и калькулятор, где токенов дизайн-системы нет. */

.pchat__hail { display: flex; align-items: flex-end; }
.pchat__mascot { display: none; }
.pchat[data-open] .pchat__hail { display: none; }

@media (min-width: 941px) {
  /* Правый край экрана, над пилюлей WhatsApp: 20 px её отступ + 52 px её
     высота + 12 px просвет = 84. По правому краю пузырь встаёт с пилюлей в
     одну линию — те же 20 px. Значения не в токенах намеренно: на
     калькуляторе WhatsApp нет, а числа те же, что у .wa-float в site.css. */
  .pchat,
  .pchat[data-side="right"] { left: auto; right: 20px; bottom: 84px; }

  /* Колонка, а не строка: реплика стоит над головой говорящего. */
  .pchat__hail { flex-direction: column; align-items: flex-end; }

  /* Пузырь. 112 px при мишке в 74 — не «красивое число», а расчёт: самая
     дальняя точка силуэта лежит в 47 px от центра, ещё до 9 px съедает
     качание. Меньший круг резал бы краем ухо или лапу, а разрубленный мишка
     читается не «в пузыре», а «сломалась вёрстка». */
  .pchat__mascot {
    display: grid;
    place-items: center;
    position: relative;
    flex: none;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    /* Плёнка: прозрачная сердцевина, блик сверху слева и уплотнение к краю —
       так пузырь читается шаром, а не цветным диском. */
    background:
      radial-gradient(circle at 30% 24%,
        rgba(255, 255, 255, .60), rgba(255, 255, 255, .10) 40%, rgba(255, 255, 255, 0) 66%),
      radial-gradient(circle at 50% 55%,
        rgba(255, 255, 255, .04) 52%, rgba(255, 255, 255, .34) 100%);
    -webkit-backdrop-filter: blur(3px) saturate(1.4);
    backdrop-filter: blur(3px) saturate(1.4);
    box-shadow:
      inset 0 -12px 20px -12px rgba(26, 19, 48, .30),
      inset 0 12px 18px -10px rgba(255, 255, 255, .90),
      0 12px 28px rgba(26, 19, 48, .14);
    transition: transform var(--pchat-dur) var(--pchat-ease),
                box-shadow var(--pchat-dur) var(--pchat-ease);
  }
  /* Состояния обязательны: пузырь — такая же кнопка, как облачко. */
  .pchat__mascot:hover {
    transform: scale(1.03);
    box-shadow:
      inset 0 -12px 20px -12px rgba(26, 19, 48, .30),
      inset 0 12px 18px -10px rgba(255, 255, 255, .90),
      0 16px 34px rgba(26, 19, 48, .18);
  }
  .pchat__mascot:active { transform: scale(.96) translateY(2px); }

  .pchat__mascot::before,
  .pchat__mascot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
  }
  /* Перелив: радужный конус медленно проворачивается под мишкой и заодно
     уводит оттенок. Одного вращения мало — цвета возвращались бы теми же;
     hue-rotate поверх и даёт ту самую мыльную смену тонов. Конус крупнее
     пузыря (scale), иначе размытый край не докрашивал бы кромку, а вылезти
     за круг ему не даёт overflow родителя. */
  .pchat__mascot::before {
    background: conic-gradient(from 0deg,
      var(--pop-red, #ff4f5a), var(--pop-orange, #ff8a3d), var(--pop-yellow, #ffd23f),
      var(--pop-green, #3ec46d), var(--pop-teal, #21c0c0), var(--pop-blue, #3d7bf5),
      var(--pop-violet, #8b5cf6), var(--pop-pink, #ff6fb5), var(--pop-red, #ff4f5a));
    opacity: .55;
    animation: pchat-iridesce 6.5s linear infinite;
  }
  /* Стекло поверх мишки: он ВНУТРИ пузыря, а не перед ним. Поэтому блик
     лежит выше картинки (z-index), но слабый — подсвечивает, а не прячет. */
  .pchat__mascot::after {
    z-index: 2;
    background:
      radial-gradient(ellipse 34% 22% at 30% 20%,
        rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 100%),
      radial-gradient(ellipse 16% 11% at 73% 79%,
        rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 100%);
    /* Кромка. У настоящего мыльного пузыря цвет живёт именно на ней, а не в
       середине: плёнка там смотрится под скользящим углом. Поэтому цветные
       inset-тени с разных сторон плюс тонкий белый ободок сверху. Белому
       hue-rotate не страшен — у него нет насыщенности, крутятся только цвета,
       и в противофазе с нижним конусом это и даёт перелив. */
    box-shadow:
      inset 7px -9px 16px -9px var(--pop-violet, #8b5cf6),
      inset -9px 7px 16px -9px var(--pop-teal, #21c0c0),
      inset 0 11px 15px -11px var(--pop-pink, #ff6fb5),
      inset 0 -11px 15px -11px var(--pop-yellow, #ffd23f),
      inset 0 0 0 1.5px rgba(255, 255, 255, .70);
    animation: pchat-rim 6.5s linear infinite;
  }

  .pchat__mascot img {
    display: block;
    position: relative;
    z-index: 1;
    width: 74px;
    height: auto;
    /* Качание вокруг СЕРЕДИНЫ, а не вокруг ног: в пузыре он плавает, а не
       стоит. Заодно так размах укладывается в круг и не режется краем. */
    transform-origin: 50% 50%;
    animation: pchat-greet 4.6s var(--pchat-ease) infinite;
  }

  /* Облачко. Хвостик — два круга, а не треугольник: острых углов в бренде нет
     нигде, тот же приём, что у облачков отзывов. Теперь он смотрит вниз, на
     голову мишки: 44 px от правого края — это середина пузыря. */
  .pchat__launch {
    position: relative;
    padding: 0 22px;
    min-height: 52px;
    font-size: 16px;
    border-radius: var(--pchat-radius);
    margin-bottom: 18px;
  }
  .pchat__launch::after {
    content: "";
    position: absolute;
    right: 44px;
    bottom: -6px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--pchat-navy);
    box-shadow: -9px 10px 0 -4px var(--pchat-navy);
  }
  .pchat__launch:hover::after { background: #182367; box-shadow: -9px 10px 0 -4px #182367; }
  /* Значок робота внутри кнопки больше не нужен: говорящий — мишка рядом. */
  .pchat__launch-icon { display: none; }
}

/* Короткий взмах и долгая пауза: так это читается приветствием, а не
   мигающим баннером. Приём тот же, что у звонящей трубки в шапке сайта.
   Размах ужат под пузырь: 74-пиксельный мишка в круге 112 при прежних 5 px
   подъёма цеплял бы кромку ухом. */
@keyframes pchat-greet {
  0%, 70%, 100% { transform: rotate(0) translateY(0); }
  75% { transform: rotate(-5deg) translateY(-4px); }
  81% { transform: rotate(4deg) translateY(0); }
  87% { transform: rotate(-3deg) translateY(-2px); }
  93% { transform: rotate(0) translateY(0); }
}

@keyframes pchat-iridesce {
  0%   { transform: rotate(0deg) scale(1.35);   filter: blur(9px) hue-rotate(0deg); }
  50%  { transform: rotate(180deg) scale(1.5);  filter: blur(11px) hue-rotate(180deg); }
  100% { transform: rotate(360deg) scale(1.35); filter: blur(9px) hue-rotate(360deg); }
}

@keyframes pchat-rim {
  0%   { filter: hue-rotate(360deg); }
  100% { filter: hue-rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Пузырь остаётся пузырём, но замирает: перелив — украшение, а не сигнал. */
  .pchat__mascot img,
  .pchat__mascot::before,
  .pchat__mascot::after { animation: none; }
  .pchat__mascot:hover { transform: none; }
}

/* ============ Телефон: чат — не окошко, а весь экран ======================
   Владелец, 05.09.2026: «на мобильной версии чат должен открыться как
   основное окно, а не подокно сайта — сайт уже не нужен, зато общение
   продолжится не в маленьком окошке».

   Почему это правильно и в мелочах:
   - Разговор с ботом на телефоне длинный: он спрашивает дату, число детей,
     считает и пересчитывает. В окне на 70% высоты видно две реплики, и
     человек листает переписку вместо того, чтобы отвечать.
   - Высоту берём у visualViewport (--pchat-h из chat.js), а не 100vh: с
     открытой клавиатурой vh остаётся прежним, и поле ввода уезжает под
     клавиатуру. dvh спасает не везде — на старых Android его нет.
   - Шапка ужата: подпись про бота перенесена в переписку первой строкой
     (chat.js), в шапке остались название и крестик. Это ~34 px, которые
     на 360 px экране видны сразу.
   - 16 px в поле ввода — не про красоту: на меньшем размере iOS зумит всю
     страницу при фокусе, и вернуться назад человек уже не может. */

@media (max-width: 640px) {
  .pchat[data-open] {
    left: 0;
    right: 0;
    top: 0;
    /* bottom проставляет chat.js, когда поднимает кнопку над чужой нижней
       панелью; в полноэкранном режиме он его снимает сам. */
    bottom: 0;
    /* Выше нижней панели сайта (z-index 50) и выше всего, что может висеть
       на калькуляторе: открытый чат — верхний слой экрана. */
    z-index: 2147483000;
  }
  .pchat[data-open] .pchat__panel {
    width: 100%;
    height: var(--pchat-h, 100%);
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
  .pchat[data-open] .pchat__head {
    align-items: center;
    padding: 6px 10px 6px 16px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
  }
  .pchat[data-open] .pchat__title { font-size: 16px; }
  .pchat[data-open] .pchat__note { display: none; }
  .pchat[data-open] .pchat__close { width: 44px; height: 44px; font-size: 22px; }

  .pchat[data-open] .pchat__log { padding: 14px; overscroll-behavior: contain; }
  .pchat[data-open] .pchat__msg { max-width: 88%; font-size: 15px; }
  .pchat[data-open] .pchat__quick { padding: 0 14px 10px; }
  .pchat[data-open] .pchat__chip { min-height: 40px; font-size: 14px; }
  .pchat[data-open] .pchat__form {
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .pchat[data-open] .pchat__input { font-size: 16px; min-height: 48px; }
  .pchat[data-open] .pchat__send { width: 48px; height: 48px; }
  .pchat[data-open] .pchat__exit { min-height: 44px; font-size: 15px; }
}

/* Пока чат открыт во весь экран, страница под ним не прокручивается: иначе
   палец «промахивается» мимо переписки и уводит сайт, который сейчас не
   нужен. Класс ставит chat.js и снимает при закрытии. */
html.pchat-fullscreen,
html.pchat-fullscreen body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Подпись про бота, вынесенная из шапки в переписку. Не пузырь: это не
   реплика, а сноска, и выглядеть репликой она не должна. */
.pchat__hint {
  align-self: center;
  max-width: 92%;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pchat-muted);
}

/* Фото темы оформления — то же, что в калькуляторе. Показывается под ответом
   бота, когда человек назвал тему и она у нас есть (владелец, 05.09.2026):
   «Барби есть» словами звучит как отписка, а картинка — как ответ. */
.pchat__theme {
  align-self: flex-start;
  max-width: 85%;
  border-radius: var(--pchat-bubble);
  overflow: hidden;
  background: var(--pchat-cream);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .10);
}
.pchat__theme img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pchat__theme-cap {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pchat-navy);
}