/* Анимированный чат вместо chat.gif: текст живой, поэтому работает на любом языке.
   Внутри блок 516x870 (размер исходной гифки), масштабируется скриптом chat-demo.js */
.chat-demo {
    position: relative;
    width: 344px;
    height: 580px;
    border-radius: 30px;
    overflow: hidden;
    background: #fcfcff;
    font-family: Montserrat, sans-serif;
}

@media (max-width: 767px) {
    .chat-demo {
        width: 100%;
        height: auto;
        aspect-ratio: 516 / 870;
    }
}

.chat-demo__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 516px;
    height: 870px;
    transform-origin: 0 0;
    color: #1f2227;
}

.chat-demo__head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
}

.chat-demo__back {
    position: absolute;
    left: 28px;
    top: 47px;
}

.chat-demo__logo {
    position: absolute;
    left: 76px;
    top: 30px;
    width: 58px;
    height: 58px;
}

.chat-demo__logo img {
    width: 58px;
    height: 58px;
    display: block;
}

.chat-demo__logo i {
    position: absolute;
    right: -2px;
    bottom: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1fd655;
    border: 2px solid #fcfcff;
}

.chat-demo__name {
    position: absolute;
    left: 150px;
    top: 47px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

.chat-demo__list {
    position: absolute;
    top: 108px;
    bottom: 118px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding-bottom: 6px;
}

.cm {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 0 31px;
    margin-top: 10px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    flex: none;
    animation-duration: 14.3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.cm--out {
    justify-content: flex-end;
}

.cm__avatar {
    width: 48px;
    height: 48px;
    flex: none;
    margin-bottom: 0;
}

.cm__col {
    display: flex;
    flex-direction: column;
    max-width: 365px;
}

.cm--out .cm__col {
    align-items: flex-end;
    max-width: 300px;
}

.cm__bubble {
    padding: 16px 22px;
    border-radius: 28px;
    font-size: 19px;
    line-height: 27px;
    font-weight: 400;
}

.cm--in .cm__bubble {
    background: #dcf3b4;
    color: #1f2227;
}

.cm--out .cm__bubble {
    background: #8cc63f;
    color: #fff;
}

.cm__time {
    margin-top: 8px;
    font-size: 13px;
    line-height: 16px;
    color: #8a8f7e;
}

.cm--in .cm__time {
    padding-left: 0;
}

/* Индикатор набора текста */
.cm--typing .cm__dots {
    display: flex;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 22px;
    background: #e8e8ec;
}

.cm__dots b {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #b4b4bb;
    animation: cm-dot 1s infinite ease-in-out;
}

.cm__dots b:nth-child(2) { animation-delay: .15s; }
.cm__dots b:nth-child(3) { animation-delay: .3s; }

@keyframes cm-dot {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

/* Появление сообщений: 14.3 c цикл (сценарий взят из исходной гифки) */
.cm--ty1 { animation-name: cm-ty1; }
.cm--m1 { animation-name: cm-m1; }
.cm--m2 { animation-name: cm-m2; }
.cm--ty2 { animation-name: cm-ty2; }
.cm--m3 { animation-name: cm-m3; }
.cm--m4 { animation-name: cm-m4; }

@keyframes cm-ty1 {
    0%, 7%        { opacity: 0; max-height: 0; margin-top: 0; }
    8.5%, 14%     { opacity: 1; max-height: 60px; margin-top: 10px; }
    16%           { opacity: 0; max-height: 60px; margin-top: 10px; }
    17.5%, 100%   { opacity: 0; max-height: 0; margin-top: 0; }
}

@keyframes cm-m1 {
    0%, 14%       { opacity: 0; max-height: 0; margin-top: 0; }
    17.5%, 92%    { opacity: 1; max-height: 240px; margin-top: 10px; }
    96%           { opacity: 0; max-height: 240px; margin-top: 10px; }
    96.1%, 100%   { opacity: 0; max-height: 0; margin-top: 0; }
}

@keyframes cm-m2 {
    0%, 37%       { opacity: 0; max-height: 0; margin-top: 0; }
    40.5%, 92%    { opacity: 1; max-height: 240px; margin-top: 10px; }
    96%           { opacity: 0; max-height: 240px; margin-top: 10px; }
    96.1%, 100%   { opacity: 0; max-height: 0; margin-top: 0; }
}

@keyframes cm-ty2 {
    0%, 41%       { opacity: 0; max-height: 0; margin-top: 0; }
    43%, 58.5%    { opacity: 1; max-height: 60px; margin-top: 10px; }
    60.5%         { opacity: 0; max-height: 60px; margin-top: 10px; }
    62%, 100%     { opacity: 0; max-height: 0; margin-top: 0; }
}

@keyframes cm-m3 {
    0%, 58.5%     { opacity: 0; max-height: 0; margin-top: 0; }
    62%, 92%      { opacity: 1; max-height: 240px; margin-top: 10px; }
    96%           { opacity: 0; max-height: 240px; margin-top: 10px; }
    96.1%, 100%   { opacity: 0; max-height: 0; margin-top: 0; }
}

@keyframes cm-m4 {
    0%, 72.7%     { opacity: 0; max-height: 0; margin-top: 0; }
    76.2%, 92%    { opacity: 1; max-height: 240px; margin-top: 10px; }
    96%           { opacity: 0; max-height: 240px; margin-top: 10px; }
    96.1%, 100%   { opacity: 0; max-height: 0; margin-top: 0; }
}

.chat-demo__input {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px;
    height: 76px;
}

.chat-demo__attach {
    position: absolute;
    left: 31px;
    top: 21px;
}

.chat-demo__field {
    position: absolute;
    left: 95px;
    right: 30px;
    top: 0;
    height: 76px;
    padding: 0 26px 0 25px;
    border-radius: 38px;
    background: #ececef;
    display: flex;
    align-items: center;
    gap: 18px;
}

.chat-demo__field span {
    flex: 1;
    font-size: 20px;
    color: #8a8d94;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .cm { animation: none; opacity: 1; max-height: none; }
    .cm--typing { display: none; }
}