.as-chat-wrap{ direction: rtl; }
.as-chat-phone{
	--as-chat-accent: #00ff96;
	position: relative;
	max-width: 380px;
	margin: 0 auto;
	border-radius: 30px;
	border: 1px solid rgba(255,255,255,.08);
	background: linear-gradient(165deg,#0c0c10,#050506);
	padding: 20px 18px 24px;
	box-shadow: 0 40px 80px -34px color-mix(in srgb, var(--as-chat-accent) 30%, transparent), inset 0 0 0 1px rgba(255,255,255,.02);
}
.as-chat-head{ display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 16px; }
.as-chat-avatar{
	width: 38px; height: 38px; border-radius: 50%; flex: none;
	background: color-mix(in srgb, var(--as-chat-accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--as-chat-accent) 18%, transparent);
	display: flex; align-items: center; justify-content: center; color: var(--as-chat-accent);
}
.as-chat-avatar svg{ width: 19px; height: 19px; }
.as-chat-head strong{ font-size: 14px; font-weight: 700; display: block; color: #f4f2ec; }
.as-chat-head small{ font-size: 11.5px; color: var(--as-chat-accent); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.as-chat-head small::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--as-chat-accent); box-shadow: 0 0 8px var(--as-chat-accent); }
.as-chat-body{ min-height: 300px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.as-chat-msg{
	max-width: 82%; padding: 10px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.75; color: #f4f2ec;
	opacity: 0; transform: translateY(8px); animation: asChatIn .45s ease forwards;
}
.as-chat-msg.as-msg-agent{
	align-self: flex-start;
	background: linear-gradient(120deg, color-mix(in srgb, var(--as-chat-accent) 16%, transparent), color-mix(in srgb, var(--as-chat-accent) 5%, transparent));
	border: 1px solid color-mix(in srgb, var(--as-chat-accent) 18%, transparent);
	border-bottom-left-radius: 4px;
}
.as-chat-msg.as-msg-user{ align-self: flex-end; background: rgba(255,255,255,.06); border-bottom-right-radius: 4px; }
@keyframes asChatIn{ to{ opacity: 1; transform: translateY(0); } }
.as-chat-typing{
	align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 15px; border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--as-chat-accent) 18%, transparent);
	background: color-mix(in srgb, var(--as-chat-accent) 6%, transparent);
	opacity: 0; transform: translateY(8px); animation: asChatIn .3s ease forwards;
}
.as-chat-typing span{ width: 6px; height: 6px; border-radius: 50%; background: var(--as-chat-accent); animation: asTypingDot 1.2s infinite ease-in-out; }
.as-chat-typing span:nth-child(2){ animation-delay: .15s; }
.as-chat-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes asTypingDot{ 0%,60%,100%{ transform: translateY(0); opacity: .5; } 30%{ transform: translateY(-4px); opacity: 1; } }