@media (prefers-reduced-motion: no-preference) {
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes shimmertext {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@keyframes loading-background {
0%, 100% { background-position: 0 0; }
50% { background-position: 100% 100%; }
}
@keyframes pulse {
50% { opacity: 0.5; }
}
@keyframes pulse-dot {
0%, 100% { transform: scale(0.75); }
50% { transform: scale(1); }
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes spin {
to { transform: rotate(1turn); }
}
@keyframes ping {
75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes outline-pulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(var(--ring-color), 0.5); }
50% { box-shadow: 0 0 0 3px rgba(var(--ring-color), 0.2); }
}
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes zoom {
0% { transform: scale(0.95); }
100% { transform: scale(1); }
}
@keyframes accordion-open {
0% { height: 0; opacity: 0; }
100% { height: var(--content-height); opacity: 1; }
}
@keyframes accordion-close {
0% { height: var(--content-height); opacity: 1; }
100% { height: 0; opacity: 0; }
}
@keyframes toast-fade-in {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes toast-slide-out {
to { transform: translateX(calc(100% + var(--drawer-width, 0px))); opacity: 0; }
}
@keyframes sidebar-enter {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes sidebar-exit {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(-100%); opacity: 0; }
}
.skeleton {
position: relative;
overflow: hidden;
}
.skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
animation: shimmer 1.5s linear infinite;
}
.pai-shimmer {
animation: shimmertext 5s linear infinite;
}
.tool-card[data-tool-type="web_search"]:not(.tool-complete) .tool-status,
.tool-card[data-tool-type="web_fetch"]:not(.tool-complete) .tool-status {
animation: shimmertext 1.05s ease-in-out infinite;
}
.loading-background,
.thinking-background {
background-size: 200% 200%;
animation: loading-background 3s ease-in-out infinite;
}
.web-search-box.searching {
animation: pulse 2s ease-in-out infinite;
}
[data-ai-thinking="true"] {
animation: pulse 2s ease-in-out infinite;
}
.typing-dot:nth-child(1) {
animation: pulse-dot 1.2s ease-in-out infinite;
animation-delay: 0s;
}
.typing-dot:nth-child(2) {
animation: pulse-dot 1.2s ease-in-out infinite;
animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
animation: pulse-dot 1.2s ease-in-out infinite;
animation-delay: 0.4s;
}
.typing-cursor,
.text-cursor {
animation: blink 1s step-end infinite;
}
.loading,
.loading-spinner,
.spinner,
.icon-spin {
animation: spin 0.75s linear infinite;
}
.notification-ping {
animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
input:focus,
textarea:focus,
select:focus,
#inputWrapper:focus-within {
animation: outline-pulse 2s ease-in-out infinite;
}
.overlay.show,
.modal-overlay.show {
animation: fade 200ms ease-out;
}
.modal.show .modal-content,
.modal-overlay.show .custom-modal,
.dropdown.show,
.tooltip.show,
.popover.show {
animation: fade 200ms ease-out, zoom 200ms ease-out;
}
.overlay.hiding,
.modal.hiding,
.dropdown.hiding,
.tooltip.hiding,
.popover.hiding {
animation: fade 150ms ease-in reverse, zoom 150ms ease-in reverse;
}
.accordion-content.opening {
overflow: hidden;
animation: accordion-open 300ms ease-out forwards;
}
.accordion-content.closing {
overflow: hidden;
animation: accordion-close 300ms ease-in forwards;
}
.toast-notification.show,
.toast.show,
.toast-entering {
animation: toast-fade-in 250ms ease-out forwards;
}
.toast.hiding,
.toast-leaving {
animation: toast-slide-out 200ms ease-in forwards;
}
.sidebar.open {
animation: sidebar-enter 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.sidebar.closing {
animation: sidebar-exit 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.switch-thumb {
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms ease;
}
.switch-btn {
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.switch {
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
}