@agentman/chat-widget/dist/assistantWidget/styles/loading.d.ts

Agentman Chat Widget for easy integration with web applications

export declare const loadingStyles = "\n  .am-chat-loading-message {\n    padding: 0 !important;\n    margin-bottom: 18px !important;\n    margin-top: 0 !important;\n    opacity: 1;\n    transition: opacity 0.15s ease-out;\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: flex-start !important;\n    width: 100% !important;\n  }\n\n  .am-chat-loading-message .am-message-role {\n    font-size: 12px !important;\n    font-weight: 600 !important;\n    color: #111827 !important;\n    margin-bottom: 8px !important;\n    margin-top: 0 !important;\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.5px !important;\n    padding: 0 !important;\n    text-align: left !important;\n  }\n\n  .am-chat-loading-message .am-message-content {\n    padding: 0 !important;\n    margin: 0 !important;\n    border-radius: 0 !important;\n    font-size: 14px !important;\n    width: 100% !important;\n    word-wrap: break-word !important;\n    line-height: 1.6 !important;\n    background: none !important;\n    border: none !important;\n    color: #111827 !important;\n    text-align: left !important;\n  }\n\n  .am-chat-loading-message.loading-fade-out {\n    opacity: 0;\n  }\n\n  .loading-container {\n    display: flex !important;\n    align-items: center !important;\n    justify-content: flex-start !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    border-radius: 0 !important;\n    width: 100% !important;\n    text-align: left !important;\n  }\n\n  .loading-waves {\n    display: flex !important;\n    align-items: center !important;\n    justify-content: flex-start !important;\n    gap: 2px !important;\n    height: 24px !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    text-align: left !important;\n  }\n\n  .loading-waves span {\n    display: inline-block;\n    width: 4px;\n    height: 4px;\n    background-color: var(--chat-secondary-color, #666);\n    border-radius: 50%;\n    animation: wave-loading 1.4s infinite ease-in-out both;\n  }\n\n  .loading-waves span:nth-child(1) {\n    animation-delay: -0.32s;\n  }\n\n  .loading-waves span:nth-child(2) {\n    animation-delay: -0.16s;\n  }\n\n  .loading-waves span:nth-child(3) {\n    animation-delay: 0s;\n  }\n\n  .loading-waves span:nth-child(4) {\n    animation-delay: 0.16s;\n  }\n\n  .loading-waves span:nth-child(5) {\n    animation-delay: 0.32s;\n  }\n\n  @keyframes wave-loading {\n    0%, 80%, 100% {\n      transform: scale(0.8) translateY(0);\n      opacity: 0.5;\n    }\n    40% {\n      transform: scale(1.2) translateY(-8px);\n      opacity: 1;\n    }\n  }\n\n  /* Alternative typing dots animation */\n  .loading-dots {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    height: 24px;\n  }\n\n  .loading-dots span {\n    display: inline-block;\n    width: 6px;\n    height: 6px;\n    background-color: var(--chat-secondary-color, #666);\n    border-radius: 50%;\n    animation: typing-dots 1.4s infinite ease-in-out;\n  }\n\n  .loading-dots span:nth-child(1) {\n    animation-delay: 0s;\n  }\n\n  .loading-dots span:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  .loading-dots span:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes typing-dots {\n    0%, 60%, 100% {\n      transform: translateY(0);\n      opacity: 0.4;\n    }\n    30% {\n      transform: translateY(-10px);\n      opacity: 1;\n    }\n  }\n";