Cookie Chat Style

/* Message wrapper */
.chat-message-wrapper{
    border-color:  transparent;
    border-radius: 18px;
    background:
		linear-gradient(#121722,#121722) padding-box,
		conic-gradient(from var(--spin,0deg),
			#ff2bd1, #5c8aff, #41ffd2, #ffd166, #ff2bd1) border-box;
    box-shadow: inset 0 0 22px rgba(0,0,0,.55), 0 0 20px rgba(92,138,255,.12);
}

/* Username */
.chat-user-name{
    color: #eaecef;
    background: linear-gradient(135deg, #eaecef 0%, #c9d1d9 50%, #eaecef 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;

    text-shadow:
		1px 0 0 rgba(255,0,80,.6),
		-1px 0 0 rgba(0,255,255,.6);

    animation:
		gradient-shift 4s ease-in-out infinite,
		name-pulse 2.6s ease-in-out infinite;
}

@keyframes gradient-shift{
    0%{ background-position: 0% 0%; }
    50%{ background-position: 100% 100%; }
    100%{ background-position: 0% 0%; }
}
@keyframes name-pulse{
    0%,100%{ text-shadow: 1px 0 0 rgba(255,0,80,.55), -1px 0 0 rgba(0,255,255,.55) }
    50%{ text-shadow: 2px 0 4px rgba(255,0,80,.75), -2px 0 4px rgba(0,255,255,.75) }
}

/* Avatar */
.chat-user-avatar{
    padding: 3px;
    background: conic-gradient(from var(--spin,0deg),
    #ff2bd1, #5c8aff, #41ffd2, #ffd166, #ff2bd1);
}

/* Message */
.chat-message{
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
    color: #eaf1ff;
    line-height: 1.6;
}

/* Cursor */
.chat-message::after{
    content: "";
    display: inline-block;
    width: .14em;
    height: 1em;
    margin-left: .32em;
    background: currentColor;

    animation: cursor-blink .75s steps(1,end) infinite;
    vertical-align: -0.15em;
}

@keyframes cursor-blink{
    0%,35%{ opacity: 1 }
    50%,85%{ opacity: 0 }
    100%{ opacity: 1 }
}Code-Sprache: CSS (css)