@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    flex-direction: column;\n    background-color: var(--chat-background-color, #ffffff);\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .am-welcome-container {\n    max-width: 500px;\n    width: calc(100% - 60px); /* Leave space for X button on the right */\n    padding: 24px 24px 20px 24px; /* Optimized vertical padding */\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    gap: 20px; /* Consistent vertical rhythm */\n    position: relative;\n    margin: 0 auto;\n    overflow-y: auto;\n    overflow-x: hidden;\n    flex: 1;\n    align-self: center;\n    scrollbar-width: thin;\n    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;\n    /* Better content distribution */\n    justify-content: flex-start;\n  }\n\n  .am-welcome-container::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .am-welcome-container::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .am-welcome-container::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n  }\n\n  .am-welcome-container::-webkit-scrollbar-thumb:hover {\n    background: rgba(0, 0, 0, 0.2);\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; /* Normal padding since button is outside now */\n    width: 100%; /* Full width for inline since no minimize button */\n  }\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: 20px; /* Slightly lower for better alignment with content */\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    z-index: 10;\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  /* Mobile-specific X button adjustments */\n  @media (max-width: 480px) {\n    .am-welcome-minimize {\n      top: 24px; /* More space from top on mobile */\n      right: 12px; /* Slightly closer to edge on mobile */\n      width: 32px; /* Slightly smaller on mobile */\n      height: 32px;\n    }\n    \n    .am-welcome-minimize svg {\n      width: 18px;\n      height: 18px;\n    }\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; /* Balanced spacing for visual hierarchy */\n    padding-top: 8px; /* Small breathing room at top */\n  }\n\n  .am-welcome-logo {\n    width: 56px;\n    height: 56px;\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  /* ===== INTERACTION GROUP (Input + Prompts) ===== */\n  \n  .am-welcome-interaction-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px; /* Tight spacing between input and prompts */\n  }\n  \n  /* ===== INPUT SECTION ===== */\n  \n  .am-welcome-input-section {\n    display: flex;\n    flex-direction: column;\n    gap: 24px; /* Space between message and input */\n  }\n\n  .am-welcome-message {\n    font-size: 17px; /* Slightly smaller for better balance */\n    color: var(--chat-text-color, #374151);\n    font-weight: 400;\n    line-height: 1.5;\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; /* Allow wrapping to 2 rows */\n    gap: 8px;\n    padding: 0;\n    margin: 0; /* No margin needed, gap handled by parent */\n  }\n\n  .am-welcome-prompt-btn {\n    flex: 1 1 calc(50% - 4px); /* 2 buttons per row with gap */\n    min-width: 0; /* Allow shrinking */\n    min-height: 48px; /* Better touch target size */\n    font-size: 13px;\n    padding: 12px 14px;\n    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);\n    color: #374151;\n    border: 1px solid rgba(209, 213, 219, 0.3);\n    border-radius: 10px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    line-height: 1.3;\n    white-space: nowrap;\n    font-family: inherit;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n    margin: 0 !important; /* Reset all margins */\n  }\n  \n  /* Alternating subtle backgrounds for visual interest */\n  .am-welcome-prompt-btn:nth-child(odd) {\n    background: linear-gradient(135deg, #f0f9ff 0%, #fafafa 100%);\n  }\n\n  .am-welcome-prompt-btn:hover {\n    background: linear-gradient(135deg, #f0f4ff 0%, #e6efff 100%);\n    color: #1e40af;\n    border-color: rgba(37, 99, 235, 0.3);\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);\n  }\n\n  .am-welcome-prompt-btn:active {\n    transform: scale(0.95);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  }\n  \n  /* Ripple effect for touch feedback */\n  .am-welcome-prompt-btn::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 0;\n    height: 0;\n    border-radius: 50%;\n    background: rgba(37, 99, 235, 0.2);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    transition: width 0.6s, height 0.6s;\n  }\n  \n  .am-welcome-prompt-btn:active::after {\n    width: 200px;\n    height: 200px;\n  }\n\n  /* ===== BOTTOM SECTION ===== */\n  \n  .am-welcome-bottom {\n    display: flex;\n    flex-direction: column;\n    gap: 8px; /* Tighter spacing for bottom elements */\n    align-items: center;\n    margin-top: auto;\n    padding-top: 12px; /* Separation from content above */\n  }\n  \n  .am-welcome-conversations-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    background: transparent;\n    border: none;\n    border-radius: 4px;\n    padding: 4px 8px;\n    font-size: 13px;\n    color: #9ca3af;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-family: inherit;\n    text-decoration: none;\n  }\n  \n  .am-welcome-conversations-link:hover {\n    background-color: rgba(0, 0, 0, 0.03);\n    color: #6b7280;\n    text-decoration: underline;\n  }\n  \n  .am-welcome-conversations-link svg {\n    width: 16px;\n    height: 16px;\n    opacity: 0.7;\n  }\n  \n  /* ===== BRANDING ===== */\n  \n  .am-welcome-branding {\n    font-size: 11px; /* Smaller to match disclaimer */\n    color: #9ca3af;\n    margin-top: 4px; /* Minimal spacing */\n    line-height: 1.3;\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  /* ===== HEIGHT-AWARE RESPONSIVE DESIGN ===== */\n  \n  /* For smaller heights, reduce spacing and sizes */\n  @media (max-height: 700px) {\n    .am-welcome-container {\n      gap: 16px;\n      padding: 48px 24px 20px 24px; /* Responsive top padding for medium heights */\n    }\n    \n    /* On mobile with small height, reduce top padding further */\n    @media (max-width: 480px) {\n      .am-welcome-container {\n        padding: 40px 16px 20px 16px; /* Balance between space and content visibility */\n      }\n    }\n    \n    .am-welcome-header {\n      gap: 12px;\n      padding-top: 8px; /* Still maintain some top padding */\n      margin-bottom: 4px;\n    }\n    \n    .am-welcome-logo {\n      width: 48px;\n      height: 48px;\n    }\n    \n    .am-welcome-logo svg {\n      width: 42px;\n      height: 42px;\n    }\n    \n    .am-welcome-title {\n      font-size: 24px;\n    }\n    \n    .am-welcome-message {\n      font-size: 16px;\n      margin-bottom: 2px;\n    }\n    \n    .am-welcome-input-section {\n      gap: 20px; /* Slightly tighter on smaller heights */\n      margin-bottom: 4px;\n    }\n    \n    .am-welcome-prompts {\n      min-height: 44px;\n      margin-bottom: 12px;\n    }\n    \n    .am-welcome-bottom {\n      padding-top: 12px;\n      gap: 6px;\n    }\n  }\n  \n  /* For very small heights */\n  @media (max-height: 550px) {\n    .am-welcome-container {\n      gap: 12px;\n      padding: 24px 20px 16px 20px; /* Still maintain decent top padding */\n    }\n    \n    .am-welcome-header {\n      gap: 10px;\n      padding-top: 4px; /* Small but present top padding */\n      margin-bottom: 2px;\n    }\n    \n    .am-welcome-logo {\n      width: 44px; /* Not too small to maintain presence */\n      height: 44px;\n    }\n    \n    .am-welcome-logo svg {\n      width: 38px;\n      height: 38px;\n    }\n    \n    .am-welcome-title {\n      font-size: 20px;\n    }\n    \n    .am-welcome-message {\n      font-size: 15px;\n    }\n    \n    .am-welcome-input-section {\n      gap: 16px;\n      margin-bottom: 2px;\n    }\n    \n    .am-welcome-prompts {\n      min-height: 40px;\n      margin-bottom: 8px;\n    }\n    \n    .am-welcome-bottom {\n      padding-top: 8px;\n    }\n  }\n  \n  /* ===== RESPONSIVE DESIGN ===== */\n  \n  @media (max-width: 480px) {\n    /* Add swipe indicator for mobile */\n    .am-welcome-screen::before {\n      content: '';\n      position: absolute;\n      top: 8px;\n      left: 50%;\n      transform: translateX(-50%);\n      width: 36px;\n      height: 4px;\n      background: rgba(0, 0, 0, 0.15);\n      border-radius: 2px;\n      z-index: 100;\n    }\n    \n    .am-welcome-container {\n      padding: 64px 16px 24px 16px; /* 64px top padding for better balance */\n      gap: 16px; /* Tighter gap to keep elements closer */\n      width: calc(100% - 50px); /* Account for X button */\n    }\n    \n    /* Maintain better padding for inline on mobile */\n    .am-chat-widget--inline .am-welcome-container {\n      padding: 40px 24px 24px 24px;\n      width: 100%; /* Full width for inline */\n    }\n    \n    .am-welcome-header {\n      gap: 12px; /* Tighter gap between logo and title */\n      margin-bottom: 12px; /* More separation from content below */\n    }\n\n    .am-welcome-title {\n      font-size: 24px;\n    }\n\n    .am-welcome-message {\n      font-size: 16px;\n    }\n    \n    /* Input section - tighter spacing on mobile */\n    .am-welcome-input-section {\n      gap: 12px; /* Tight gap to keep heading close to input */\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    /* Adjust minimize button position for mobile */\n    .am-welcome-minimize {\n      top: 20px;\n      right: 12px;\n      width: 32px;\n      height: 32px;\n    }\n    \n    /* Mobile inherits the base prompt styles - no overrides needed */\n    \n    /* Bottom section adjustments */\n    .am-welcome-bottom {\n      padding-top: 16px; /* More separation from content */\n      margin-top: auto; /* Push to bottom */\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    /* Maintain padding on mobile */\n    .am-welcome-prompt-btn:first-child {\n      margin-left: 16px;\n    }\n    \n    .am-welcome-prompt-btn:last-child {\n      margin-right: 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    /* Add subtle gradient background for depth */\n    background: linear-gradient(180deg, \n      var(--chat-background-color, #ffffff) 0%,\n      rgba(249, 250, 251, 0.3) 100%\n    );\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  /* Slide up animation for container */\n  @keyframes slideUp {\n    from {\n      opacity: 0;\n      transform: translateY(30px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  \n  .am-welcome-container {\n    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n  \n  /* Logo entrance animation for mobile */\n  @keyframes logoAppear {\n    from {\n      opacity: 0;\n      transform: scale(0.8) translateY(-10px);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1) 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";