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

Agentman Chat Widget for easy integration with web applications

export declare const welcomeStyles = "\n  /* ===== WELCOME SCREEN LAYOUT ===== */\n  \n  .am-welcome-screen {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--chat-background-color, #ffffff);\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n  }\n\n  .am-welcome-container {\n    max-width: 500px;\n    width: 100%;\n    padding: 40px 24px;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    position: relative;\n  }\n  \n  /* Balanced max-width for inline variant */\n  .am-chat-widget--inline .am-welcome-container {\n    max-width: 720px; /* Wider than mobile but not too wide */\n    padding: 40px 40px;\n  }\n  \n  /* For very large screens, allow a bit more width */\n  @media (min-width: 1200px) {\n    .am-chat-widget--inline .am-welcome-container {\n      max-width: 800px;\n    }\n  }\n\n  /* ===== MINIMIZE BUTTON ===== */\n  \n  .am-welcome-minimize {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: white;\n    border: 1px solid #e5e7eb;\n    color: #6b7280;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.2s ease;\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1;\n    padding: 0;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  }\n\n  .am-welcome-minimize:hover {\n    background-color: #f3f4f6;\n    border-color: #d1d5db;\n    color: #374151;\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  }\n\n  .am-welcome-minimize svg {\n    width: 20px;\n    height: 20px;\n    stroke: currentColor;\n  }\n\n  /* ===== WELCOME HEADER ===== */\n  \n  .am-welcome-header {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n  }\n\n  .am-welcome-logo {\n    width: 58px;\n    height: 58px;\n    border-radius: 50%;\n    background-color: var(--chat-button-color, #2563eb);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);\n  }\n\n  .am-welcome-logo svg {\n    width: 50px;\n    height: 50px;\n  }\n\n  .am-welcome-title {\n    font-size: 28px;\n    font-weight: 600;\n    color: var(--chat-text-color, #111827);\n    margin: 0;\n    line-height: 1.2;\n  }\n\n  /* ===== INPUT SECTION ===== */\n  \n  .am-welcome-input-section {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n\n  .am-welcome-message {\n    font-size: 18px;\n    color: var(--chat-text-color, #374151);\n    font-weight: 400;\n    line-height: 1.4;\n  }\n\n  /* Input component styles moved to input.ts */\n  .am-welcome-input-placeholder {\n    width: 100%;\n  }\n\n  /* ===== PROMPTS SECTION ===== */\n  \n  .am-welcome-prompts {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n    margin-top: 8px;\n  }\n\n  .am-welcome-prompt-btn {\n    background: transparent;\n    color: #374151;\n    border: 0.5px solid #d1d5db;\n    border-radius: 8px;\n    padding: 12px 20px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    line-height: 1.2;\n    white-space: nowrap;\n    font-family: inherit;\n  }\n\n  .am-welcome-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(-2px);\n    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);\n  }\n\n  .am-welcome-prompt-btn:active {\n    transform: translateY(0);\n  }\n\n  /* ===== BOTTOM SECTION ===== */\n  \n  .am-welcome-bottom {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    align-items: center;\n    margin-top: auto;\n  }\n  \n  .am-welcome-conversations-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: transparent;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    padding: 8px 16px;\n    font-size: 14px;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-family: inherit;\n  }\n  \n  .am-welcome-conversations-link:hover {\n    background-color: #f9fafb;\n    border-color: #d1d5db;\n    color: #374151;\n  }\n  \n  .am-welcome-conversations-link svg {\n    width: 18px;\n    height: 18px;\n  }\n  \n  /* ===== BRANDING ===== */\n  \n  .am-welcome-branding {\n    font-size: 13px;\n    color: #9ca3af;\n    margin-top: auto;\n  }\n\n  .am-welcome-branding a {\n    color: var(--chat-button-color, #2563eb);\n    text-decoration: none;\n    font-weight: 500;\n  }\n\n  .am-welcome-branding a:hover {\n    text-decoration: underline;\n  }\n\n  /* ===== RESPONSIVE DESIGN ===== */\n  \n  @media (max-width: 480px) {\n    .am-welcome-container {\n      padding: 24px 16px;\n      gap: 24px;\n    }\n    \n    /* Maintain better padding for inline on mobile */\n    .am-chat-widget--inline .am-welcome-container {\n      padding: 24px 24px;\n    }\n\n    .am-welcome-title {\n      font-size: 24px;\n    }\n\n    .am-welcome-message {\n      font-size: 16px;\n    }\n\n    .am-welcome-logo {\n      width: 48px;\n      height: 48px;\n    }\n\n    .am-welcome-logo svg {\n      width: 40px;\n      height: 40px;\n    }\n\n    /* Input component responsive styles moved to input.ts */\n\n\n    .am-welcome-prompt-btn {\n      font-size: 13px;\n      padding: 10px 16px;\n    }\n  }\n\n  /* ===== VARIANT-SPECIFIC STYLES ===== */\n  \n  /* Corner variant - full screen overlay on mobile */\n  .am-chat-widget--corner .am-welcome-screen {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  /* Centered variant - fits container */\n  .am-chat-widget--centered .am-welcome-screen {\n    min-height: 500px;\n  }\n\n  /* Inline variant - adapts to container */\n  .am-chat-widget--inline .am-welcome-screen {\n    min-height: 400px;\n  }\n\n  /* ===== ANIMATIONS ===== */\n  \n  .am-welcome-screen {\n    animation: fadeIn 0.3s ease-out;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* Focus animation for input */\n  .am-welcome-input-container {\n    animation: none;\n  }\n\n  .am-welcome-input-container:focus-within {\n    animation: inputFocus 0.2s ease-out;\n  }\n\n  @keyframes inputFocus {\n    from {\n      transform: scale(1);\n    }\n    to {\n      transform: scale(1.02);\n    }\n  }\n";