[hideprofile][html]

<style>
/* ON:AIR / КОМПАКТНЫЙ МЕССЕНДЖЕР — ОБЩИЕ СТИЛИ ДЛЯ ОБОИХ ШАБЛОНОВ */
.oa-mini {
  /* === ЦВЕТА: ЗДЕСЬ НАСТРАИВАЕТСЯ ОФОРМЛЕНИЕ === */
  --left: #ffffff;            /* ЦВЕТ ПУЗЫРЕЙ СЛЕВА */
  --right: #ffffff;           /* ЦВЕТ ПУЗЫРЕЙ СПРАВА */
  --text: #27374e;            /* ЦВЕТ ТЕКСТА СООБЩЕНИЙ */
  --muted: #7388a2;           /* ЦВЕТ ВРЕМЕНИ И ПОДПИСЕЙ */
  --wallpaper: #edf3fa;       /* ФОН ЧАТА, ЕСЛИ НЕ УКАЗАНА КАРТИНКА */
  --head-start: #1b305a;     /* ЦВЕТ ШАПКИ: ТЁМНЫЙ КРАЙ */
  --head-end: #3e6aa8;       /* ЦВЕТ ШАПКИ: СВЕТЛЫЙ КРАЙ */
  /* === КОНЕЦ НАСТРОЕК ЦВЕТОВ === */
  position: relative; box-sizing: border-box;
  width: 100%; max-width: 390px; margin: 12px auto;
  overflow: hidden; border-radius: 20px;
  border: 1px solid #d3dfec; background: #fff;
  box-shadow: 0 10px 26px rgba(24,45,76,.16);
  font: 12px/1.4 'Trebuchet MS', Arial, sans-serif; color: var(--text);
}
.oa-mini *, .oa-mini *::before, .oa-mini *::after { box-sizing: border-box; }
/* ШАПКА — ЕДИНЫЙ ФОРУМНЫЙ ДИЗАЙН, ФОН НЕ МЕНЯТЬ */
.oa-mini .oa-head {
  display: flex; align-items: center; gap: 9px; height: 68px; padding: 9px 17px;
  background: radial-gradient(circle at 90% -30%,rgba(165,230,255,.31),transparent 42%),
              linear-gradient(110deg,var(--head-start),var(--head-end));
  color: white;
}
.oa-mini .oa-back { font: 29px/1 Arial,sans-serif; color: #d5ebff; }
.oa-mini .oa-avatar { width: 43px; height: 43px; flex: 0 0 43px; border-radius: 50%; border: 2px solid #e7f4ff; object-fit: cover; background: #9bb0cd; }
.oa-mini .oa-person { min-width: 0; flex: 1; }
.oa-mini .oa-name { font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.oa-mini .oa-phone { font-size: 10px; color: #d5e9ff; margin-top: 2px; }
.oa-mini .oa-brand { font-size: 9px; letter-spacing: 1px; color: #cbeaff; font-weight: bold; }
/* ПРОКРУТКА И ОБОИ: на .oa-history можно поставить свои обои через style="background-image:url(...)" */
.oa-mini .oa-history {
  height: 395px; padding: 19px 21px 20px;
  overflow-y: scroll; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #98b3d2 transparent;
  background-color: var(--wallpaper);
  background-image: radial-gradient(circle at 16% 21%,#fff,transparent 50%),
                    radial-gradient(circle at 90% 87%,#d8e5f5,transparent 45%);
  /* ОБОИ АВТОМАТИЧЕСКИ ЗАПОЛНЯЮТ ОКНО ПЕРЕПИСКИ.
     cover сохраняет пропорции, но может обрезать края изображения. */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.oa-mini .oa-history::-webkit-scrollbar { width: 6px; }
.oa-mini .oa-history::-webkit-scrollbar-thumb { background: #98b3d2; border-radius: 10px; }
.oa-mini .oa-history::-webkit-scrollbar-track { background: transparent; }
.oa-mini .oa-date { width: fit-content; margin: 0 auto 16px; padding: 3px 10px; border-radius: 20px; color: #59769c; background: #dfe8f3; font-size: 10px; }
/* ТЕКСТОВЫЕ, ФОТО И ГОЛОСОВЫЕ СООБЩЕНИЯ */
.oa-mini .oa-row { display: flex; margin: 0 0 14px; }
.oa-mini .oa-row.left { justify-content: flex-start; }
.oa-mini .oa-row.right { justify-content: flex-end; }
.oa-mini .oa-stack { display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; min-width: 0; }
.oa-mini .oa-row.right .oa-stack { align-items: flex-end; }
.oa-mini .oa-bubble {
  width: fit-content; max-width: 100%; min-width: 52px;
  padding: 8px 11px; border-radius: 14px 14px 14px 4px;
  background: var(--left); color: var(--text);
  box-shadow: 0 2px 6px rgba(23,52,91,.08); overflow-wrap: anywhere;
}
.oa-mini .oa-row.right .oa-bubble { border-radius: 14px 14px 4px 14px; background: var(--right); color: var(--text); }
/* ВРЕМЯ ВНУТРИ ПУЗЫРЯ: справа внизу, как в Telegram */
.oa-mini .oa-bubble .oa-time {
  display: block; width: 100%; margin-top: 4px; padding: 0;
  color: var(--muted); font-size: 9px; line-height: 1.1;
  text-align: right; white-space: nowrap;
}
/* Время поверх нижнего края круглого GIF-сообщения */
.oa-mini .oa-round-wrap { position: relative; width: 112px; height: 112px; }
.oa-mini .oa-round-wrap .oa-time {
  position: absolute; right: 4px; bottom: 5px;
  font-size: 9px; line-height: 1; padding: 3px 5px;
  border-radius: 8px; background: rgba(27,42,63,.65);
  color: #fff; white-space: nowrap;
}
.oa-mini .oa-text { white-space: pre-line; }
.oa-mini .oa-photo { display: block; width: 200px; max-width: 100%; height: auto; border-radius: 8px; }
.oa-mini .oa-caption { margin-top: 5px; font-size: 11px; }
/* ГОЛОСОВОЕ И РАСШИФРОВКА: работает без JavaScript */
.oa-mini .oa-voice { width: 248px; max-width: 100%; }
.oa-mini .oa-voice-head { display: flex; align-items: center; gap: 8px; }
.oa-mini .oa-play { flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; background: #e1edf9; color: #3c71aa; }
.oa-mini .oa-row.right .oa-play { background: #e1edf9; color: #3c71aa; }
.oa-mini .oa-voice-info { min-width: 0; flex: 1; }
.oa-mini .oa-voice-label { font-size: 11px; font-weight: bold; }
.oa-mini .oa-voice-length { font-size: 10px; opacity: .8; }
.oa-mini .oa-wave {
  margin-top: 8px; width: 100%; height: 22px;
  display: flex; align-items: flex-end; gap: 2px;
}
.oa-mini .oa-wave i {
  display: block; flex: 1 1 0; min-width: 3px;
  border-radius: 999px; background: linear-gradient(180deg,#bfd0e2,#8ea8c2);
  opacity: .95;
}
.oa-mini .oa-wave i:nth-child(1) { height: 7px; }
.oa-mini .oa-wave i:nth-child(2) { height: 11px; }
.oa-mini .oa-wave i:nth-child(3) { height: 16px; }
.oa-mini .oa-wave i:nth-child(4) { height: 9px; }
.oa-mini .oa-wave i:nth-child(5) { height: 18px; }
.oa-mini .oa-wave i:nth-child(6) { height: 13px; }
.oa-mini .oa-wave i:nth-child(7) { height: 8px; }
.oa-mini .oa-wave i:nth-child(8) { height: 15px; }
.oa-mini .oa-wave i:nth-child(9) { height: 20px; }
.oa-mini .oa-wave i:nth-child(10) { height: 12px; }
.oa-mini .oa-wave i:nth-child(11) { height: 10px; }
.oa-mini .oa-wave i:nth-child(12) { height: 17px; }
.oa-mini .oa-wave i:nth-child(13) { height: 14px; }
.oa-mini .oa-wave i:nth-child(14) { height: 8px; }
.oa-mini .oa-wave i:nth-child(15) { height: 19px; }
.oa-mini .oa-wave i:nth-child(16) { height: 12px; }
.oa-mini .oa-spoiler { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(100,133,169,.22); }
.oa-mini .oa-row.right .oa-spoiler { border-color: rgba(100,133,169,.22); }
.oa-mini .oa-spoiler summary { cursor: pointer; font-size: 10px; font-weight: bold; list-style: none; }
.oa-mini .oa-spoiler summary::-webkit-details-marker { display: none; }
.oa-mini .oa-spoiler summary::after { content: ' ▾'; }
.oa-mini .oa-spoiler[open] summary::after { content: ' ▴'; }
.oa-mini .oa-spoiler .oa-hide { display: none; }
.oa-mini .oa-spoiler[open] .oa-show { display: none; }
.oa-mini .oa-spoiler[open] .oa-hide { display: inline; }
.oa-mini .oa-transcript { margin-top: 6px; font-size: 11px; line-height: 1.5; white-space: pre-line; }
/* КРУЖОЧЕК GIF */
.oa-mini .oa-round { display: block; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 3px solid white; background: #9fb2c9; box-shadow: 0 2px 9px rgba(38,60,95,.2); }
.oa-mini .oa-row.right .oa-round { border-color: white; }
/* НИЖНЯЯ СТРОКА — ТОЛЬКО ОФОРМЛЕНИЕ */
.oa-mini .oa-footer { height: 39px; padding: 0 17px; display: flex; align-items: center; gap: 9px; border-top: 1px solid #dae5f0; color: #91a5bd; background: #fcfdff; }
.oa-mini .oa-plus { color: #4b9fe4; font-size: 22px; line-height: 1; }
.oa-mini .oa-placeholder { flex: 1; }
.oa-mini .oa-footerlogo { color: #7a9cc6; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
/* УВЕДОМЛЕНИЕ (ПО ЖЕЛАНИЮ): появляется, только если есть блок .oa-new-message */
.oa-mini .oa-new-message {
  position: absolute; z-index: 10; top: 75px; left: 18px; right: 18px;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  padding: 12px 14px;
  background: rgba(244,248,255,.64); color: #263852;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.57); border-radius: 14px;
  box-shadow: 0 7px 22px rgba(30,60,102,.16);
  pointer-events: none;
  opacity: 0;
  animation: oa-mini-pop 8s ease 0.8s infinite;
}
.oa-mini .oa-notify-name { font-size: 11px; font-weight: 800; }
.oa-mini .oa-notify-text { font-size: 11px; color: #4b5f7c; overflow-wrap: anywhere; }
@keyframes oa-mini-pop {
  0%, 7% { opacity: 0; transform: translateY(-12px); }
  14%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .oa-mini .oa-new-message { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 430px) {
  .oa-mini { border-radius: 12px; margin: 6px auto; }
  .oa-mini .oa-history { height: 395px; }
  .oa-mini .oa-brand { display: none; }
}
</style>

<!-- УВЕДОМЛЕНИЕ ПО ЖЕЛАНИЮ: вставь блок из onair_messenger_notification_no_avatar.txt после шапки -->
<div class="oa-mini">
  <!-- 01 / ШАПКА: фон зафиксирован, можно менять только данные контакта -->
  <div class="oa-head">
    <span class="oa-back">‹</span>
    <img class="oa-avatar" src="https://i.pinimg.com/1200x/90/12/14/901214e55640a4f23d9ddc79e3198615.jpg" alt="Аватар контакта">
    <div class="oa-person"><div class="oa-name">пёс</div>
      <div class="oa-phone">+7 ХХХХХХХХ</div></div>
    <span class="oa-brand">ON:AIR</span>
  </div>

 
  <!-- УВЕДОМЛЕНИЕ ПО ЖЕЛАНИЮ: удали этот блок целиком, если оно не нужно.
       Для использования измени только ИМЯ и ТЕКСТ. -->
  <div class="oa-new-message" role="status" aria-live="off">
    <div class="oa-notify-name">настюха</div>
    <div class="oa-notify-text">хуйня какая-то, но вроде прикольно</div>
  </div>

  <!-- 03 / ОБОИ ЧАТА. ВАЖНО: ссылку вставлять в style НИЖЕ, а не в комментарий!
       Без своих обоев: удалить атрибут style целиком. -->
  <div class="oa-history" style="background-image: url('https://i.pinimg.com/736x/71/7a/cf/717acfca6348429bc9010a1370bac2df.jpg');">
    <div class="oa-date">Сегодня</div>

    <!-- СООБЩЕНИЕ: ТЕКСТ -->
      <div class="oa-row right"><div class="oa-stack">
        <div class="oa-bubble"><div class="oa-text">заебал</div><span class="oa-time">15:28 ✓✓</span></div>
      </div></div>

    <!-- СООБЩЕНИЕ: ГОЛОСОВОЕ + СПОЙЛЕР РАСШИФРОВКИ -->
    <div class="oa-row right"><div class="oa-stack">
      <div class="oa-bubble oa-voice">
        <div class="oa-voice-head">
          <span class="oa-play">▶</span>
          <div class="oa-voice-info"><div class="oa-voice-label">Голосовое</div><div class="oa-voice-length">0:02</div></div>
        </div>
        <div class="oa-wave" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <details class="oa-spoiler">
          <summary><span class="oa-show">Показать расшифровку</span><span class="oa-hide">Скрыть расшифровку</span></summary>
          <div class="oa-transcript">ты где бля</div>
        </details>
        <span class="oa-time">15:29 ✓✓</span>
      </div>
    </div></div>

    <!-- СООБЩЕНИЕ: ФОТО, подпись необязательна -->
    <div class="oa-row right"><div class="oa-stack">
      <div class="oa-bubble">
        <img class="oa-photo" src="https://i.pinimg.com/736x/e9/a7/16/e9a71623ae1596417cc297c5dcc2c963.jpg" alt="Фото в переписке">
        <div class="oa-caption">как тебе?</div>
        <span class="oa-time">15:31 ✓✓</span>
      </div>
    </div></div>

    <!-- СООБЩЕНИЕ: КРУЖОЧЕК — вставь GIF в src -->
    <div class="oa-row right"><div class="oa-stack">
      <div class="oa-round-wrap">
        <img class="oa-round" src="https://i.pinimg.com/originals/05/04/a0/0504a0b8f0cfc51af081179dfc0e1e69.gif" alt="Кружочек GIF">
        <span class="oa-time">15:32 ✓✓</span>
      </div>
    </div></div>
  </div>

  <div class="oa-footer"><span class="oa-plus">＋</span><span class="oa-placeholder">Сообщение...</span><span class="oa-footerlogo">ON:AIR</span></div>
</div>

[/html]