diff --git a/src/layout/components/Aichat/ChatPopup.vue b/src/layout/components/Aichat/ChatPopup.vue index 1560e6a..75ab020 100644 --- a/src/layout/components/Aichat/ChatPopup.vue +++ b/src/layout/components/Aichat/ChatPopup.vue @@ -1792,6 +1792,39 @@ export default { animation: thinking-pulse 2s infinite; } +.digital-avatar.thinking .eye { + animation: thinking-eyes 3s infinite; +} + +.digital-avatar.thinking .avatar-face::before { + content: ''; + position: absolute; + top: 8px; + left: 6px; + width: 8px; + height: 2px; + background: #333; + border-radius: 1px; + animation: thinking-eyebrow-left 2.5s infinite; +} + +.digital-avatar.thinking .avatar-face::after { + content: ''; + position: absolute; + top: 8px; + right: 6px; + width: 8px; + height: 2px; + background: #333; + border-radius: 1px; + animation: thinking-eyebrow-right 2.5s infinite; +} + +.digital-avatar.thinking .avatar-mouth { + animation: thinking-mouth 4s infinite; + transform-origin: center; +} + .digital-avatar.speaking { animation: speaking-glow 0.5s infinite alternate; } @@ -1874,6 +1907,70 @@ export default { } } +@keyframes thinking-eyes { + 0%, 100% { + transform: translateX(0) translateY(0) scale(1); + } + 25% { + transform: translateX(-1px) translateY(-0.5px) scale(0.95); + } + 50% { + transform: translateX(1px) translateY(0.5px) scale(0.9); + } + 75% { + transform: translateX(0) translateY(-1px) scale(0.95); + } +} + +@keyframes thinking-eyebrow-left { + 0%, 100% { + transform: translateY(0) rotate(0deg); + opacity: 0.7; + } + 30% { + transform: translateY(-1px) rotate(-2deg); + opacity: 0.9; + } + 60% { + transform: translateY(0.5px) rotate(1deg); + opacity: 0.8; + } +} + +@keyframes thinking-eyebrow-right { + 0%, 100% { + transform: translateY(0) rotate(0deg); + opacity: 0.7; + } + 35% { + transform: translateY(-0.5px) rotate(2deg); + opacity: 0.9; + } + 65% { + transform: translateY(1px) rotate(-1deg); + opacity: 0.8; + } +} + +@keyframes thinking-mouth { + 0%, 100% { + transform: translateX(0) scale(1); + border-radius: 50%; + } + 25% { + transform: translateX(-1px) scale(0.8); + border-radius: 30% 70% 70% 30%; + } + 50% { + transform: translateX(1px) scale(0.9); + border-radius: 70% 30% 30% 70%; + } + 75% { + transform: translateX(0) scale(0.85); + border-radius: 40% 60% 60% 40%; + } +} + @keyframes speaking-glow { 0% { box-shadow: 0 0 10px rgba(79, 172, 254, 0.5);