[html]<style>

/* ===============================
   ГЛАВНЫЙ КОНТЕЙНЕР ЧАТА
=============================== */
.cnc-chat {

width: 430px;
    height: 600px;
    box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 20%);
    display: flex;
    flex-direction: column;
    margin: 10px auto;
    background: url(https://forumstatic.ru/files/001a/0c/05/33093.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.cnc-chat header {
height: 500px;
    margin-top: 65px;

    display: flex;
    width: 430px;
    align-items: center;
   border-top: 1px solid #b6b6b6;
    background: linear-gradient(#e7e7e69c,#dcdcdc) ;

}
/* ===============================
   HEADER — ШАПКА
=============================== */
.cnc-header {
height: 64px;
    margin: -450px 20px 0px;
    padding: 12px 16px;
    width: 300px;
    display: flex;
    align-items: center;
    gap: 12px;
    background-size: cover;
}

/* аватар пользователя */
.cnc-avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 2px;

border: 1px solid #f1f1f1 !important;
margin-top: -50px;
    outline: 1px solid #03030333;
    outline-offset: 1px;}

/* никнейм */
.cnc-username {
margin-top: -20px;
  font-size: 12px;
  color: #333;
}

/* ===============================
   ОБЛАСТЬ СООБЩЕНИЙ
=============================== */
.cnc-messages {
flex: 1;
    display: flex;
    padding: 18px;
    overflow-y: auto;
    background:var(--pun-quote);
    margin: -460px 20px 5px;
    border-radius: 5px;
    flex-direction: column;

}

.cnc-messages details{

    padding: 8px 10px;
    font-size: 11px;
    color: #666666;
border-radius: 8px;
    margin-top: -15px;
    width: 190px;
}

/* базовый пузырь сообщения */
.cnc-messages m{
    background: var(--color-primary);
    padding: 8px 10px;
    font-size: 11px;
    color: #444;
    line-height: 1.35;
    margin-bottom: 10px;
    max-width: 95%;

}

/* короткие сообщения */
.cnc-messages m[left]{
  width: fit-content;
border-radius: 6px 6px 6px 0px;}

.cnc-messages m[right] {
    width: fit-content;
    align-self: flex-end !important;
border-radius: 6px 6px 0px 6px;
background: #ffffff;}
.cnc-messages left{
  width: fit-content;
border-radius: 6px 6px 6px 0px;}

.cnc-messages right {
    width: fit-content;
    align-self: flex-end !important;
border-radius: 6px 6px 0px 6px;
}
.cnc-message sma {
  width: fit-content;
}

      /* ===============================
дата сообщений
=============================== */

.cnc-messages data {
display: flex;
    padding: 1px 20px;
    border-radius: 5px;
    background-color: #fafafa;
    font-family: Arial, sans-serif;
    font-size: 10px;
    width: fit-content;
    margin: 10px auto;
    font-weight: 300;
    color: #666666;
    letter-spacing: 1px;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
    justify-content: center;
    align-items: center;
}

/* длинное текстовое сообщение */
.cnc-messages left_photo,.cnc-messages left_story {
  width: 85%;
background: #f5f5f500;
}

.cnc-messages right_photo, .cnc-messages right_story {

    background: #f5f5f500;
    display: flex;
    justify-content: flex-end;
}
.cnc-messages left_photo img, .cnc-messages right_photo img{
    max-width: 230px;
    max-height: 230px;
    border-radius: 10px;
    min-width: 180px;
    min-height: 180px;
    object-fit: cover;
margin-bottom: 10px;}

.cnc-messages right_story img, .cnc-messages left_story img {
    max-width: 100px;
    max-height: 100px;
    border-radius: 100%;
    min-width: 70px;
    min-height: 70px;
margin: 8px 8px 15px 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 1px solid #fff;
  background-color: #eaeaea; /* Фоновый цвет для пустого аватара */
    object-fit: cover;
  filter: grayscale(70%);

}

.cnc-messages right_story img:hover, .cnc-messages left_story img:hover{
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.25);
  transition: all 0.3s ease;
  filter: grayscale(0%);}
/* пропущенный вызов ) */

.missed-call {
background:  var(--text-color-main);
    border-radius: 8px;
    padding: 6px 10px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: sans-serif;;
    max-width: 230px;
    margin: 5px 10px 10px 50px;

}

.missed-call icon {
font-size: 1.4em;
}

.missed-call text {
  flex: 1;
  font-weight: 400;
  line-height: 1.3;
font-size: 9px;}

.missed-call time {
  font-size: 0.9em;
  opacity: 0.8;
}

.missed-call icon::before {
    content: '\e61d'; /* Иконка камеры (использует Font Awesome) */
    font-family: var(--font-symbol);
    color: white;
    font-size: 22px;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' -25,
  'opsz' 20
}

/* ===============================
   НИЖНЯЯ ПАНЕЛЬ ВВОДА
=============================== */
.cnc-input-bar {
height: 58px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
background:  var(--color-primary);
    justify-content: center;
}
.chat-form { display: flex;
    gap: 10px;
    align-items: center;
background: var(--pun-quote);
box-shadow: 0px 0px 1px 0px rgb(0 0 0 / 20%);
    font: 11px var(--font-text);
    color:#3939399e;
    border-radius: 20px;
    align-self: stretch;
    padding: 4px 10px !important;
    box-sizing: border-box;
    flex: 1;
    justify-content: flex-end;
}
.chat-form text {  margin-right: auto!important;  position: relative; }

.chat-form::before {
content: '\e413';
    font-family:  var(--font-symbol);
    position: relative;
    top: 0px;
    width: 25px;
    font-size: 21px;
color:#3939399e;

    z-index: 4;
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 25,
  'opsz' 24
}
.chat-form::after {
content: '\e226';
    font-family:  var(--font-symbol);
    position: relative;
    top: 0px;
    left: 7px;
    width: 21px;
    font-size: 21px;
   color:#3939399e;
    z-index: 4;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 25,
  'opsz' 24
}

.chat-footer {   display: flex;  gap: 10px; width: 370px; height: 35px; align-items: center;  justify-content: space-between; }
.chat-footer .voice {background: #c6c6c5;
    border-radius: 100%;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-footer .voice::before {
content: '\e029';
    font-family: var(--font-symbol);
    position: relative;
    top: 0px;
    left: 0px;
    font-size: 23px;
color: #eeeeee;
    z-index: 4;

}

/* поле ввода */
.cnc-input {
  flex: 1;
  height: 34px;
  border-radius: 18px;
  border: none;
  padding: 0 14px;
  font-size: 13px;
  background: #f9f9f9;
}
/* ===============================
  БЛОК
=============================== */
.cnc-messages locked {
background: var(--color-primary);
    padding: 7px 0px 7px 5px;
    border-radius: 5px;
    text-align: center;
    width: 94%;
    margin: 10px auto;
}
.cnc-messages locked pe {
   display: block;
    font-size: 11px !important;
    padding: 0px 0.3em 5px 0.3em;
color: #000000d6;}

#close {

    padding: 2px 30px;
    background: var(--red);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* ===============================
голосовое
=============================== */
/* Кнопка с треугольником */
    .vb {
      width: 25px;
      height: 25px;
      border: none;
      border-radius: 15%;
      background-color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: default;
    }

    /* Треугольник «плей» через CSS-границы */
    .play-m {
       width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #c40000;
    margin-left: 2px;
    }

.cnc-messages voice-msg,.cnc-messages vooice-msg  {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
   
    border-radius: 8px;
    padding: 10px 12px;
    max-width: 190px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.cnc-messages voice-msg{
background-color: var(--text-color-main);}
.cnc-messages vooice-msg{
background-color: var(--red);}
.waveform {

    display: flex;
    align-items: center;
    height: 20px;
    flex-grow: 1;
    gap: 9px;
    margin-left: 10px;
    overflow: hidden;
    padding: 0 2px;}
.bar {
  width: 3px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  animation: wave-animation 1.4s infinite ease-in-out;
}

/* Задаём разные задержки для эффекта «живой» волны */
.bar:nth-child(1) { animation-delay: 0s; height: 6px; }
.bar:nth-child(2) { animation-delay: 0.1s; height: 10px; }
.bar:nth-child(3) { animation-delay: 0.2s; height: 14px; }
.bar:nth-child(4) { animation-delay: 0.3s; height: 8px; }
.bar:nth-child(5) { animation-delay: 0.4s; height: 12px; }
.bar:nth-child(6) { animation-delay: 0.5s; height: 16px; }
.bar:nth-child(7) { animation-delay: 0.6s; height: 10px; }
.bar:nth-child(8) { animation-delay: 0.7s; height: 14px; }

.duration {
  color: white;
  font-size: 10px;
  margin-left: 0px;
  min-width: 60px;
  text-align: right;
  font-weight: 500;
}

@keyframes wave-animation {
  0%, 100% {
    height: 6px;
  }
  50% {
    height: var(--max-height, 16px);
    background-color: white;
  }
}

/* Адаптация для маленьких экранов */
@media (max-width: 480px) {
  .voice-msg {
    max-width: 220px;
  }
  .duration {
    font-size: 11px;
  }
}

/* ===============================
реакция на сообщения
=============================== */

.reactions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
justify-content: flex-start;}

.reaction{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background-color: #f7f7f7;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s
ease;
}

.reaction:hover{
  background-color: #d8dadf;
  transform: scale(1.1);
}

.reactions_f{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
justify-content: flex-end;}

/* ===============================
соо
=============================== */

.rtimestamp, .ltimestamp {
font-size: 10px;
    color: #939393;
    display: flex;
    margin-top: 5px;
   align-items: flex-end;
font-style: italic;}
.ltimestamp {
      justify-content: flex-start;
}

.rtimestamp {
    justify-content: flex-end;
}

/* ===============================
пересылка
=============================== */

.message-bubble {
    padding: 5px 15px 1px 5px;
    position: relative;
    background: #f7f7f7;
    border-radius: 5px;
    margin-bottom: 10px;

}

.forwarded-label {
    border-radius: 4px;
    margin-bottom: 5px;
    font-style: italic;
margin-left: 8px;
color: #494949;
    font-size: 11px;
    padding: 0px 10px;}

/* Стилизация стрелки (имитация иконки пересланного сообщения) */
.message-bubble::before {
    content: '\e5da'; /* Иконка камеры (использует Font Awesome) */
    font-family:  var(--font-symbol);
    position: absolute;
      top: 5px;
    left: 10px;
    width: 0;
      font-style: italic;
    height: 0;
    font-size: 10px;

  color: #787878;
  z-index: 1;
}
.message-bubble text {
    font-style: italic;
    font-size: 8px;

    display: block;
    color: #585858;
    padding: 0px 20px 5px;
}

/* ===============================
цитата
=============================== */
    .mess {
   margin: 5px 0;
    padding: 8px;
    border-radius: 5px;
        }

        .out {
       background-color: #f7f7f7a1;
    align-self: flex-start;
    border-left: 5px solid var(--red);;
    font-size: 9px;

        }
      .sender {    font-size: 12px;
            font-weight: bold;
            color: var(--red);
            margin-bottom: 2px;
        }
      /* ===============================
соо удалено
=============================== */

  .deleted-message,  .deletede-message{    flex-direction: row-reverse;
            display: inline-flex;
            align-items: center;
            background-color: var(--color-primary);
            color:  var(--text-color-main);
          padding: 3px 12px;
    border-radius: 8px;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-size: 12px;
            line-height: 1.5;
       width: fit-content; 
margin-bottom: 10px;
    font-style: italic;}
  .deletede-message {
            display: inline-flex;
            align-items: center;
            background-color: #ffffff;
           }
        .deleted-message::before,.deletede-message::before {
          content: '\e872';
    font-family: var(--font-symbol);
    display: inline-block;
    width: 20px;
    height: 20px;
    color:   var(--text-color-main);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    margin-right: 2px;

        }

</style>
<!-- ВЕРХНЯЯ ПАНЕЛЬ НЕ ТРОГАТЬ-->
<div class="cnc-chat" "><header > <div class="cnc-header">
<!-- НИК, АВАТАР-->

<img class="cnc-avatar" src="https://upforme.ru/uploads/001a/0c/05/2/580482.png">
<span class="cnc-username">@name username</span>
<!-- ........................................-->
</div> </header><div class="cnc-messages">
<!-- ОБЛАСТЬ СООБЩЕНИЙ  -->

<data>вчера</data>
<left> <div class="deleted-message">вы удалили данное сообщение</div></left>

<m left> <div class="message-bubble"><div class="forwarded-label">пересланное сообщение от <b>bang chan</b></div></div> какое-то небольшое сообщение для какое-то<span class="ltimestamp">01:02</span></m left>
<m right>какое-то небольшое сообщение для    <span class="rtimestamp">01:02</span></m right>
<left_story><img src="https://i.pinimg.com/originals/b7/20/75/b720757e9dd935346d4b8af451254fe4.gif"></left_story> 
<m left>  какое-то небольшое сообщение <div class="reactions">
        <span class="reaction">💀</span>
        <span class="reaction">❤️</span>
        <span class="reaction">💋</span>
        <span class="reaction">🤍</span>
      </div></m left>
<m right>  <div class="mess out">
            <div class="sender">bang chan</div>
            <div>А ты беспокоишься?</div>
      </div>какое-то небольшое сообщение для какое-то небольшое сообщение для какое-то небольшое сообщение для какое-то небольшое сообщение для какое-то небольшое сообщение для </m right>
<m right>какое-то небольшое сообщение для    <span class="rtimestamp">изменено</span></m right>
<right> <div class="deletede-message">данное сообщение удалено</div></right>
<m right>  это наши новейшие значки, объединяющие более глифов в одном файле шрифта с широким спектром это наши новейшие значки, объединяющие более глифов в одном файле шрифта с широким спектром <div class="reactions_f"><span class="reaction">💀</span></div></m right>

<div class="missed-call"><icon> </icon><text><big><b>пропущенный звонок</b></big><br>нажмите, чтобы перезвонить</text><time>16:49</time></div>

<m left>  <img src="https://upforme.ru/uploads/0013/63/cd/2/49703.png"> <img src="https://upforme.ru/uploads/0013/63/cd/2/49703.png"> <img src="https://upforme.ru/uploads/0013/63/cd/2/49703.png"></m left>

<left_photo><img src="https://i.pinimg.com/736x/95/b3/d7/95b3d7b167da3bfd1cfde00a859e263f.jpg"></left_photo>
<right_photo><img src="https://i.pinimg.com/736x/95/b3/d7/95b3d7b167da3bfd1cfde00a859e263f.jpg"></right_photo>
<right_story><img src="https://i.pinimg.com/originals/b7/20/75/b720757e9dd935346d4b8af451254fe4.gif"></right_story> 
<m left>  <div class="mess out"> <div class="sender">bang chan</div><div>какое-то небольшое сообщение для какое-то </div></div>
какое-то небольшое сообщение </m left>
<!-- голосовое -->
<voice-msg><button class="vb"><div class="play-m"></div></button><div class="waveform"><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div><div class="duration">0:00 / 2:30 </div></voice-msg>

<!-- голосовое -->

<!-- голосовое -->
<right> <vooice-msg><button class="vb"><div class="play-m"></div></button><div class="waveform"><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div><div class="duration">0:00 / 2:30 </div></voice-msg></right><right><details><summary>перевод голосового сообщения</summary>
<p>текст перевода</p>
</details></right>
<!-- голосовое -->
<data>сегодня</data>
<m right>  <div class="message-bubble"><div class="forwarded-label">пересланное сообщение от <b>bang chan</b></div><text>какое-то небольшое сообщение для какое-то небольшое сообщение для какое-то небольшое </text></div>
это наши новейшие значки, объединяющие более глифов в одном файле шрифта с широким спектром это наши новейшие значки, объединяющие более глифов в одном файле шрифта с широким спектром

</m right>
 
<locked><pe>доступ запрещен! этот пользователь вас заблокировал. </pe><button id="close">ок</button> </locked>

<!-- НИЖНЯЯ ПАНЕЛЬ ВВОДА НЕ ТРОГАТЬ-->
</div><div class="cnc-input-bar"><div class="chat-footer"><span class="chat-form"><text>send message ...</text>
</span>

<span class="voice"></span></div>
<!-- НИЖНЯЯ ПАНЕЛЬ ВВОДА -->
</div>
[/html]

[html]<style>.arrival_fond { z-index:-2;
width: 450px;
    height: 200px;
    position: relative;
   margin: -40px 0px 0px 0px;
    overflow: hidden;
    box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 20%);
background: linear-gradient(136deg, #dcdcdc4a, #dcdcdc), url(https://forumstatic.ru/files/001a/0c/05/85924.png);
background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.arri {
width: 450px;
    height: 260px;
    position: relative;
margin: 20px auto;}

.fa {
width: 100px;
    height: 50px;
    margin-left: 60px;
    display: block;
    margin-top: 18px !important;
    font-size: 13px;
   background: url(https://forumstatic.ru/files/001a/0c/05/24643.png);
}

.arri img {
z-index: 2;
    position: absolute;
    height: 40px;
    width: 40px;
    filter: grayscale(100%);
    border: 1px solid #f1f1f1 !important;
   margin: -11px 10px 0px 21px;
outline:1px solid #03030333;
    outline-offset: 1px;}

.faces{

    color: #454545;
    border: 0;
    margin: 0px 0px -25px 150px;
    width: 200px;
font: 600 15px var(--font-title2);}

.arrival_block {

border-radius: 1px;
    position: relative;
    margin: 40px auto;
    width: 420px;
    height: 115px;
background: #eeeeee;
    box-shadow: 0px 1px 2px 0 rgb(0 0 0 / 20%);
}

.arrival_box {
    width: 400px;
    height: 98px;
    display: flex;
    overflow-y: auto;
color: #3939399c;
    font: 11px var(--font-text);

    padding: 10px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 14px;

}

.p_desc_wrap {     display: flex;
    margin: 5px auto;
    width: 400px;
    height: 30px;
    justify-content: center;
}
.p_links a {

font-family: var(--font-title2);
    font-size: 8px;
    text-transform: uppercase;
    background: #d8d8d8;
    box-shadow: 1px 1px 1px 0 rgb(0 0 0 / 34%);
    color: var(--color-link) !important;
;

    height: 20px;
    width: 120px;

    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
.p_links a:hover {   background: #f1f1f1; }
.p_links {   display: flex;
    gap: 10px;
    margin-top: -40px;
   flex-direction: row;
}

</style>

<div class="arri">
<div class="faces">welcome to home</div>
<div class="fa"><img src="https://upforme.ru/uploads/001a/0c/05/2/580482.png"> </div>
<div class="arrival_fond">
<div class="arrival_block">
<div class="arrival_box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur s gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit,  consectetur adipiscing elit,  consectetur  cicici cici   cicici cici sit amet, Lorem ipsum dolor sit amet, sit amet, Lorem ipsum dolor sitsisit 

</div>
</div>
</div>
<div class="p_desc_wrap">
<div class="p_links">
<a href="https://prooof.rusff.me/viewtopic.php?id=7#p76">связь с амс </a>
<a href="https://prooof.rusff.me/viewtopic.php?id=7#p76">забрать подарок</a>
<a href="https://prooof.rusff.me/viewtopic.php?id=7#p76">закупиться</a>

</div></div>
</div>

[/html]