#typingIndicatorBar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding: 0 12px 0 4px;
    text-align: left;
    transition: height 0.15s ease, opacity 0.15s ease, margin 0.15s ease;
}
#typingIndicatorBar.is-visible {
    height: 22px;
    opacity: 1;
    margin: 0 0 6px 0;
}
#typingIndicatorBar .typing-av-slot {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}
#typingIndicatorBar .typing-av-slot > * {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}
#typingIndicatorBar .typing-av-slot img {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block;
}
#typingIndicatorBar .typing-indicator-text {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    background: linear-gradient(90deg, #8a8a8a 0%, #fff 30%, #6b6b6b 50%, #fff 70%, #8a8a8a 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: zchatTypingWave 2.2s ease-in-out infinite;
}
[data-theme="light"] #typingIndicatorBar .typing-indicator-text {
    background: linear-gradient(90deg, #9a9a9a 0%, #111 30%, #777 50%, #111 70%, #9a9a9a 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
@keyframes zchatTypingWave {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}