.search__form {
    padding: 0 !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0;
    transition: none;
    transition: box-shadow 0.2s ease;
    overflow: visible!important;
}

.search__form.active {
    height: calc(100dvh - 40px);
    max-height: 500px;
    border-radius: 20px;
}

.initRealtime {
    display: none;
}

.search__form-actions {
    display: flex;
    padding: 8px 20px;
}

.search__form.active .search__form-header,
.search__form.active .search__form-body {
    display: flex;
}

.search__form-body {
    display: none;
    flex: 1;
    padding: 20px;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
}

.search__form-header {
    padding: 8px 100px;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 24px;
    position: relative;
}

#closeChat, #collapseChat {
    position: absolute;
    top: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
}

#closeChat {
    right: 0px;
}
#collapseChat {
    right: 40px;
}
.msg {
    max-width: 85%;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease-in;
    display: flex;
    align-items: start;
    gap: 10px;
}

.msg .role {
    display: flex;
    align-items: center;
    padding: 5px;
    background: linear-gradient(126deg, #00e1ff, #118cff 39.9%, #db3eff 80.29%);
    border: 1px solid var(--violet);
    color: white;
    border-radius: 50%;
}

.msg .text {
    padding: 5px 10px;
    border-radius: 10px;
    white-space: pre-line;
}

.msg.me .text {
    background: var(--violet);
    color: white;
}

.msg.me {
    align-self: flex-end;
    margin-left: auto;
    flex-direction: row-reverse;
}

.msg.other .text {
    background: #e9ecef;
    color: #333;
}

.msg.other {
    align-self: flex-start;
    margin-right: auto;
}

/* #initRealtime {
    pointer-events: none;
} */
#initRealtime .icon-bg {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.41211 4.9625C8.41211 4.27625 8.68472 3.61811 9.16997 3.13286C9.65522 2.64761 10.3134 2.375 10.9996 2.375C11.6859 2.375 12.344 2.64761 12.8292 3.13286C13.3145 3.61811 13.5871 4.27625 13.5871 4.9625V9.275C13.5871 9.96125 13.3145 10.6194 12.8292 11.1046C12.344 11.5899 11.6859 11.8625 10.9996 11.8625C10.3134 11.8625 9.65522 11.5899 9.16997 11.1046C8.68472 10.6194 8.41211 9.96125 8.41211 9.275V4.9625Z" stroke="%2371717B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.96289 9.2749C4.96289 10.8761 5.59898 12.4118 6.73123 13.5441C7.86348 14.6763 9.39915 15.3124 11.0004 15.3124C12.6016 15.3124 14.1373 14.6763 15.2695 13.5441C16.4018 12.4118 17.0379 10.8761 17.0379 9.2749" stroke="%2371717B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.54999 18.7625H14.45" stroke="%2371717B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 15.3125V18.7625" stroke="%2371717B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center;
    background-size: 22px;
    background-repeat: no-repeat;
}

#initRealtime[disabled] .icon-bg {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2371717B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader-icon lucide-loader"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/><script xmlns=""/></svg>');
    animation: rotate 1s linear infinite;
}

@keyframes  rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }    
}
#initRealtime.active .icon-bg  {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2371717B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-pause-icon lucide-circle-pause"><circle cx="12" cy="12" r="10"/><line x1="10" x2="10" y1="15" y2="9"/><line x1="14" x2="14" y1="15" y2="9"/><script xmlns=""/></svg>');
}
#initRealtime.active {
    animation: shadowPulse 1s ease-in-out infinite;
    background-color: var(--gray-20);
}
#initRealtime {
    position: relative;
    /* border: 1px solid rgba(17, 140, 255, 0.12); */
}
#initRealtime:after, #initRealtime::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    border: 1px solid #118cff;
    opacity: 0;
    border-radius: 50%
}
 
#initRealtime:not(.active, [disabled]):after,#initRealtime:not(.active, [disabled])::before {
    animation: circleSequence 2.4s linear infinite;
}
#initRealtime:not(.active, [disabled])::before {
    animation-delay: .9s;
}
@keyframes pulseFirst {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  5% {
    opacity: .12;
  }
  35% {
    transform: scale(2.27);
    opacity: 0.06;
  }
  95% {
    transform: scale(2.27);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes circleSequence {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  5% {
    transform: scale(1);
    opacity: .12;
  }
  15% {
    transform: scale(1);
    opacity: .12; /* Замирание */
  }
  50% {
    transform: scale(2.27); /* Увеличение */
    opacity: 0.06;
  }
  60% {
    transform: scale(2.27);
    opacity: 0.06; /* Замирание */
  }
  100% {
    transform: scale(2.27);
    opacity: 0; /* Исчезновение */
  }
}

@keyframes shadowPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

#send-btn[disabled], #initRealtime[disabled] {
    pointer-events: none;
    opacity: 0.5;
}