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

Agentman Chat Widget for easy integration with web applications

export declare const promptStyles = "\n  /* Input Prompts Container */\n  .am-chat-input-prompts {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding: 12px 16px 8px 16px;\n    background: var(--chat-background-color, #ffffff);\n    border-bottom: 1px solid #e5e7eb;\n  }\n\n  /* Individual Prompt Buttons */\n  .am-chat-input-prompt-btn {\n    background-color: #f3f4f6;\n    color: #374151;\n    border: 1px solid #d1d5db;\n    border-radius: 16px;\n    padding: 6px 12px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    line-height: 1.2;\n    white-space: nowrap;\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .am-chat-input-prompt-btn:hover {\n    background-color: var(--chat-button-color, #2563eb);\n    color: var(--chat-button-text-color, #ffffff);\n    border-color: var(--chat-button-color, #2563eb);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n\n  .am-chat-input-prompt-btn:active {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  }\n\n  /* Hide prompts when input is focused and has content */\n  .am-chat-input:focus ~ .am-chat-input-prompts,\n  .am-chat-input:not(:placeholder-shown) ~ .am-chat-input-prompts {\n    opacity: 0.7;\n  }\n\n  /* Responsive adjustments */\n  @media (max-width: 480px) {\n    .am-chat-input-prompts {\n      padding: 8px 12px 6px 12px;\n      gap: 6px;\n    }\n\n    .am-chat-input-prompt-btn {\n      font-size: 12px;\n      padding: 5px 10px;\n      max-width: 150px;\n    }\n  }\n\n  /* Animation for showing/hiding prompts - DISABLED */\n  /* .am-chat-input-prompts {\n    transition: opacity 0.3s ease, transform 0.3s ease;\n  } */\n\n  .am-chat-input-prompts[style*=\"display: none\"] {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n\n  /* ===== FLOATING PROMPT BUBBLES (When widget is closed) ===== */\n  \n  .am-chat-floating-prompts-container {\n    position: fixed;\n    bottom: 80px; /* Above the toggle button */\n    right: 20px;\n    max-width: 320px;\n    z-index: 999; /* Below the toggle button which is 1000 */\n    animation: fadeInUp 0.3s ease forwards;\n  }\n\n  @keyframes fadeInUp {\n    from {\n      opacity: 0;\n      transform: translateY(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* Position-specific adjustments */\n  .am-chat-widget--corner[data-position=\"bottom-left\"] .am-chat-floating-prompts-container {\n    right: auto;\n    left: 20px;\n  }\n  \n  .am-chat-widget--corner[data-position=\"top-right\"] .am-chat-floating-prompts-container {\n    bottom: auto;\n    top: 80px;\n  }\n  \n  .am-chat-widget--corner[data-position=\"top-left\"] .am-chat-floating-prompts-container {\n    bottom: auto;\n    top: 80px;\n    right: auto;\n    left: 20px;\n  }\n\n  /* Welcome message bubble */\n  .am-chat-floating-welcome-message {\n    background: white;\n    border-radius: 16px;\n    padding: 16px;\n    margin-bottom: 12px;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n    border: 1px solid #e5e7eb;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  }\n\n  .am-chat-floating-welcome-header {\n    display: flex;\n    align-items: center;\n  }\n\n  .am-chat-floating-welcome-avatar {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background-color: var(--chat-button-color, #2563eb);\n    margin-right: 12px;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n  }\n\n  .am-chat-floating-welcome-avatar svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  .am-chat-floating-welcome-text {\n    font-weight: 500;\n    font-size: 14px;\n    color: #111827;\n    line-height: 1.4;\n  }\n\n  /* Floating prompt buttons container */\n  .am-chat-floating-message-prompts {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    align-items: flex-end; /* Right-align buttons */\n  }\n\n  /* Individual floating prompt buttons */\n  .am-chat-floating-message-prompt {\n    background: white;\n    color: #374151;\n    border: 1px solid #e5e7eb;\n    border-radius: 20px;\n    padding: 12px 16px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    text-align: left;\n    transition: all 0.2s ease;\n    line-height: 1.3;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    max-width: 100%;\n    word-wrap: break-word;\n    font-family: inherit;\n  }\n\n  .am-chat-floating-message-prompt:hover {\n    background: var(--chat-button-color, #2563eb);\n    color: var(--chat-button-text-color, #ffffff);\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  }\n\n  .am-chat-floating-message-prompt:active {\n    transform: translateY(0);\n  }\n\n  /* Hide floating prompts on mobile devices */\n  @media (max-width: 768px) {\n    .am-chat-floating-prompts-container {\n      display: none !important;\n    }\n  }\n\n  /* Responsive adjustments for smaller screens */\n  @media (max-width: 480px) {\n    .am-chat-floating-prompts-container {\n      right: 12px;\n      max-width: 280px;\n    }\n    \n    .am-chat-floating-welcome-message {\n      padding: 12px;\n    }\n    \n    .am-chat-floating-message-prompt {\n      font-size: 13px;\n      padding: 10px 14px;\n    }\n  }\n";