/* ============================================================ ZENO — AI Cat Assistant Widget Drop this CSS into your project or link it in ============================================================ */ /* ===== CONTAINER ===== */ #zeno-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; animation: zeno-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } #zeno-container > * { pointer-events: auto; } @keyframes zeno-entrance { 0% { opacity: 0; transform: translateY(50px) scale(0.7); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ===== SPEECH BUBBLE ===== */ #zeno-speech-bubble { max-width: 290px; min-width: 120px; padding: 14px 18px; background: rgba(12, 12, 28, 0.90); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(122, 255, 200, 0.12); border-radius: 18px; color: #e4e4f0; font-size: 13.5px; line-height: 1.55; box-shadow: 0 6px 32px rgba(0, 0, 0, 0.30), 0 0 60px rgba(122, 255, 200, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: translateY(12px) scale(0.92); opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; word-wrap: break-word; overflow-wrap: break-word; cursor: pointer; user-select: none; } #zeno-speech-bubble.zeno-visible { transform: translateY(0) scale(1); opacity: 1; } /* Bubble tail arrow */ #zeno-speech-bubble::after { content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid rgba(12, 12, 28, 0.90); } /* User's spoken text echo */ #zeno-user-text { font-size: 11px; color: rgba(255, 255, 255, 0.40); font-style: italic; margin-bottom: 6px; display: none; } #zeno-user-text.zeno-visible { display: block; } /* Subtitle area */ #zeno-subtitle-text { min-height: 14px; } /* Typing cursor */ #zeno-subtitle-text.zeno-typing::after { content: '▊'; color: #7affc8; margin-left: 1px; animation: zeno-cursor 0.7s step-end infinite; } @keyframes zeno-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Thinking dots */ #zeno-thinking-dots { display: none; gap: 5px; justify-content: center; padding: 6px 0; } #zeno-thinking-dots.zeno-active { display: flex; } #zeno-thinking-dots span { width: 7px; height: 7px; border-radius: 50%; background: #7affc8; animation: zeno-dot-bounce 1.4s ease-in-out infinite; } #zeno-thinking-dots span:nth-child(2) { animation-delay: 0.16s; } #zeno-thinking-dots span:nth-child(3) { animation-delay: 0.32s; } @keyframes zeno-dot-bounce { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.35; } 40% { transform: scale(1.1); opacity: 1; } } /* Text-input fallback (shown when Speech API unavailable) */ #zeno-text-input-container { display: none; gap: 5px; width: 100%; margin-top: 8px; } #zeno-text-input-container.zeno-visible { display: flex; } #zeno-text-input { flex: 1; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(122, 255, 200, 0.18); background: rgba(255, 255, 255, 0.05); color: #e4e4f0; font-size: 12px; outline: none; transition: border-color 0.25s; } #zeno-text-input:focus { border-color: rgba(122, 255, 200, 0.45); } #zeno-text-input::placeholder { color: rgba(255,255,255,0.25); } #zeno-text-send { padding: 6px 12px; border-radius: 10px; border: none; background: linear-gradient(135deg, #667eea, #764ba2); color: white; font-size: 12px; cursor: pointer; transition: transform 0.15s; } #zeno-text-send:hover { transform: scale(1.06); } /* ===== MIC BUTTON ===== */ #zeno-mic-btn { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 4px 18px rgba(102, 126, 234, 0.45), 0 0 22px rgba(102, 126, 234, 0.12); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; outline: none; } #zeno-mic-btn:hover { transform: scale(1.12); box-shadow: 0 6px 24px rgba(102, 126, 234, 0.55), 0 0 36px rgba(102, 126, 234, 0.2); } #zeno-mic-btn:active { transform: scale(0.94); } #zeno-mic-btn svg { width: 20px; height: 20px; fill: white; z-index: 1; } /* Recording state */ #zeno-mic-btn.zeno-recording { background: linear-gradient(135deg, #ff6b6b 0%, #ee3b3b 100%); box-shadow: 0 4px 18px rgba(255, 107, 107, 0.55), 0 0 22px rgba(255, 107, 107, 0.2); } /* Pulse ring */ #zeno-mic-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; border: 2px solid transparent; opacity: 0; pointer-events: none; } #zeno-mic-btn.zeno-recording #zeno-mic-pulse { animation: zeno-pulse-ring 1.4s ease-out infinite; border-color: rgba(255, 107, 107, 0.55); } @keyframes zeno-pulse-ring { 0% { width: 46px; height: 46px; opacity: 1; } 100% { width: 88px; height: 88px; opacity: 0; } } /* ===== CAT WRAPPER ===== */ #zeno-cat-wrapper { position: relative; cursor: pointer; transition: transform 0.3s ease; } #zeno-cat-wrapper:hover { transform: scale(1.06); } #zeno-cat-svg { width: 140px; height: auto; filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.28)); transition: filter 0.35s ease; } /* Name tag */ #zeno-name-tag { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #667eea, #764ba2); color: white; font-size: 9.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; padding: 2px 12px; border-radius: 9px; box-shadow: 0 2px 10px rgba(102, 126, 234, 0.35); } /* ===== MINIMIZE BUTTON ===== */ #zeno-minimize-btn { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); color: rgba(255, 255, 255, 0.50); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.2s ease; pointer-events: auto; z-index: 2; } #zeno-container:hover #zeno-minimize-btn { opacity: 1; } #zeno-minimize-btn:hover { background: rgba(255, 80, 80, 0.35); color: white; } /* Minimised state */ #zeno-container.zeno-minimized #zeno-speech-bubble, #zeno-container.zeno-minimized #zeno-mic-btn, #zeno-container.zeno-minimized #zeno-minimize-btn { display: none; } #zeno-container.zeno-minimized #zeno-cat-wrapper { transform: scale(0.65); } /* ========================================================= CAT SVG ANIMATIONS ========================================================= */ /* --- Transform setup for SVG groups --- */ .zeno-tail, .zeno-body-group, .zeno-head-group, .zeno-blink-group, .zeno-whiskers, .zeno-mouth-open { transform-box: fill-box; } /* --- TAIL SWAY (idle) --- */ .zeno-tail { transform-origin: 0% 100%; animation: zeno-tail-sway 2.8s ease-in-out infinite; } @keyframes zeno-tail-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(12deg); } } /* --- EYE BLINK --- */ .zeno-blink-group { transform-origin: center center; animation: zeno-blink 4.2s ease-in-out infinite; } @keyframes zeno-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.05); } } /* --- BREATHING --- */ .zeno-body-group { transform-origin: center 100%; animation: zeno-breathe 3.8s ease-in-out infinite; } @keyframes zeno-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } } /* --- WHISKER TWITCH --- */ .zeno-whiskers { transform-origin: center center; animation: zeno-whisker-twitch 6s ease-in-out infinite; } @keyframes zeno-whisker-twitch { 0%, 88%, 100% { transform: scaleX(1); } 92% { transform: scaleX(1.08); } 96% { transform: scaleX(0.96); } } /* --- MOUTH (closed/open) --- */ .zeno-mouth-open { display: none; } .zeno-mouth-closed { display: inline; } /* default */ /* ========================================================= STATE: LISTENING ========================================================= */ [data-state="listening"] .zeno-tail { animation-duration: 0.9s; } [data-state="listening"] .zeno-blink-group { animation: none; transform: scaleY(1.1); } [data-state="listening"] #zeno-cat-svg { filter: drop-shadow(0 5px 22px rgba(122, 255, 200, 0.30)); } /* ========================================================= STATE: THINKING ========================================================= */ [data-state="thinking"] .zeno-tail { animation: none; transform: rotate(0deg); } [data-state="thinking"] .zeno-pupil { animation: zeno-look-around 1.6s ease-in-out infinite; } @keyframes zeno-look-around { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(3px); } 70% { transform: translateX(-3px); } } /* ========================================================= STATE: SPEAKING ========================================================= */ [data-state="speaking"] .zeno-head-group { animation: zeno-head-bob 0.85s ease-in-out infinite; } @keyframes zeno-head-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-2px) rotate(1.2deg); } 70% { transform: translateY(-1px) rotate(-1deg); } } [data-state="speaking"] .zeno-head-group { transform-origin: center 100%; } [data-state="speaking"] .zeno-tail { animation-duration: 0.7s; } [data-state="speaking"] #zeno-cat-svg { filter: drop-shadow(0 5px 22px rgba(118, 75, 162, 0.30)); } /* Speaking mouth animation */ [data-state="speaking"] .zeno-mouth-closed { display: none; } [data-state="speaking"] .zeno-mouth-open { display: inline; transform-origin: center center; animation: zeno-mouth-move 0.28s ease-in-out infinite alternate; } @keyframes zeno-mouth-move { 0% { transform: scaleY(0.25); opacity: 0.5; } 100% { transform: scaleY(1); opacity: 1; } } /* ========================================================= ERROR STYLING ========================================================= */ #zeno-speech-bubble.zeno-error { border-color: rgba(255, 107, 107, 0.30); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 480px) { #zeno-container { bottom: 10px; right: 10px; gap: 6px; } #zeno-cat-svg { width: 105px; } #zeno-speech-bubble { max-width: 210px; font-size: 12px; padding: 10px 14px; } #zeno-mic-btn { width: 38px; height: 38px; } #zeno-mic-btn svg { width: 16px; height: 16px; } #zeno-name-tag { font-size: 8px; padding: 2px 8px; } }