@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: calc(80px + var(--sticky-bottom-offset, 0px)); /* Above the toggle button + sticky offset */\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  /* Left-align prompts when widget is on the left */\n  .am-chat-widget--corner[data-position=\"bottom-left\"] .am-chat-floating-message-prompts,\n  .am-chat-widget--corner[data-position=\"top-left\"] .am-chat-floating-message-prompts {\n    align-items: flex-start;\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    position: relative;\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    flex: 1;\n    padding-right: 28px;\n  }\n\n  .am-chat-floating-welcome-close {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    background: #f3f4f6;\n    border: none;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #6b7280;\n    transition: all 0.2s ease;\n    padding: 0;\n  }\n\n  .am-chat-floating-welcome-close:hover {\n    background-color: #e5e7eb;\n    color: #111827;\n  }\n\n  .am-chat-floating-welcome-close svg {\n    width: 14px;\n    height: 14px;\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\n  /* ===== MODERNIZED WELCOME CARD (2025 Standards) ===== */\n\n  .am-chat-floating-welcome-card {\n    position: fixed;\n    /* Position (bottom/top/left/right) and transform-origin set dynamically via JavaScript */\n    background: linear-gradient(135deg,\n      rgba(255, 255, 255, 0.95) 0%,\n      rgba(255, 255, 255, 0.85) 100%);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 20px;\n    padding: 44px 0px 16px;\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.08),\n      0 24px 48px rgba(0, 0, 0, 0.06),\n      inset 0 1px 0 rgba(255, 255, 255, 0.5);\n    max-width: 360px;\n    width: 360px;\n    text-align: center;\n    z-index: 1000;\n    overflow: hidden;\n    /* CHANGE THIS LINE TO TEST DIFFERENT ANIMATIONS:\n       - gentleFadeIn (smooth slide up from 40px)\n       - softScale (grows from 85% - NO sliding)\n       - blurFade (heavy blur + slide - very distinct!)\n       - naturalSpring (bouncy overshoot)\n       - minimalSlide (barely moves - 4px only)\n       - magneticSlideIn (old bouncy version)\n    */\n    animation: blurFade 0.5s ease-out;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .am-chat-floating-welcome-card:hover {\n    transform: translateY(-2px);\n  }\n\n  /* Animation Options - Switch by changing animation name on line 278 */\n\n  /* OPTION 1: Gentle Fade & Rise (Apple-style - Most subtle) */\n  @keyframes gentleFadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(40px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* OPTION 2: Soft Scale (Google Material-style) - NO vertical movement, just growth */\n  @keyframes softScale {\n    from {\n      opacity: 0;\n      transform: scale(0.85);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  /* OPTION 3: Blur Fade (macOS-style - Most sophisticated) - Heavy blur effect */\n  @keyframes blurFade {\n    from {\n      opacity: 0;\n      filter: blur(20px);\n      transform: translateY(30px);\n    }\n    to {\n      opacity: 1;\n      filter: blur(0);\n      transform: translateY(0);\n    }\n  }\n\n  /* OPTION 4: Natural Spring (Vercel/Linear-style) - Bouncy with overshoot */\n  @keyframes naturalSpring {\n    0% {\n      opacity: 0;\n      transform: translateY(40px) scale(0.9);\n    }\n    60% {\n      transform: translateY(-8px) scale(1.02);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  /* OPTION 5: Minimal Slide (Stripe-style - Most conservative) - Barely moves */\n  @keyframes minimalSlide {\n    from {\n      opacity: 0;\n      transform: translateY(4px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* EXTREME TEST ANIMATIONS - These are VERY different, use to verify it's working */\n\n  /* TEST A: Slide from RIGHT (horizontal instead of vertical) */\n  @keyframes slideFromRight {\n    from {\n      opacity: 0;\n      transform: translateX(100px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n\n  /* TEST B: Spin and fade in */\n  @keyframes spinIn {\n    from {\n      opacity: 0;\n      transform: rotate(-180deg) scale(0.3);\n    }\n    to {\n      opacity: 1;\n      transform: rotate(0) scale(1);\n    }\n  }\n\n  /* TEST C: Instant pop (no animation) */\n  @keyframes instantPop {\n    from {\n      opacity: 0;\n      transform: scale(0.5);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  /* OLD: Magnetic Slide In (Current - bouncy, can feel grating) */\n  @keyframes magneticSlideIn {\n    0% {\n      transform: translateY(40px) scale(0.92) rotateX(10deg);\n      opacity: 0;\n      filter: blur(4px);\n    }\n    50% {\n      transform: translateY(-5px) scale(1.02) rotateX(-2deg);\n      filter: blur(0);\n    }\n    100% {\n      transform: translateY(0) scale(1) rotateX(0);\n      opacity: 1;\n      filter: blur(0);\n    }\n  }\n\n  /* Noise texture overlay */\n  .am-chat-floating-welcome-card::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background:\n      repeating-conic-gradient(\n        from 0deg at 50% 50%,\n        transparent 0deg,\n        rgba(255, 255, 255, 0.03) 1deg,\n        transparent 2deg\n      );\n    opacity: 0.4;\n    pointer-events: none;\n    z-index: 1;\n    border-radius: 24px;\n  }\n\n  /* Advanced animated background */\n  .am-chat-welcome-card-background {\n    position: absolute;\n    inset: -50%;\n    z-index: 0;\n    pointer-events: none;\n    overflow: hidden;\n    opacity: 0;\n    animation: fadeInBackground 1s ease-out 0.3s forwards;\n  }\n\n  @keyframes fadeInBackground {\n    to {\n      opacity: 1;\n    }\n  }\n\n  /* Mesh gradient orbs */\n  .am-chat-welcome-card-bg-circle {\n    position: absolute;\n    border-radius: 50%;\n    filter: blur(40px);\n    mix-blend-mode: multiply;\n    animation: floatOrb 8s ease-in-out infinite;\n  }\n\n  .am-chat-welcome-card-bg-circle:nth-child(1) {\n    width: 400px;\n    height: 400px;\n    background: radial-gradient(circle at 30% 30%,\n      var(--chat-toggle-background-color, #2563eb) 0%,\n      transparent 70%);\n    top: -20%;\n    left: -20%;\n    opacity: 0.35;\n    animation-duration: 8s;\n  }\n\n  .am-chat-welcome-card-bg-circle:nth-child(2) {\n    width: 350px;\n    height: 350px;\n    background: radial-gradient(circle at 70% 70%,\n      var(--chat-toggle-background-color, #2563eb) 0%,\n      transparent 70%);\n    bottom: -20%;\n    right: -20%;\n    opacity: 0.25;\n    animation-duration: 10s;\n    animation-delay: -2s;\n  }\n\n  .am-chat-welcome-card-bg-circle:nth-child(3) {\n    width: 300px;\n    height: 300px;\n    background: radial-gradient(circle at 50% 50%,\n      var(--chat-toggle-background-color, #2563eb) 0%,\n      transparent 70%);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    opacity: 0.18;\n    animation-duration: 12s;\n    animation-delay: -4s;\n  }\n\n  @keyframes floatOrb {\n    0%, 100% {\n      transform: translate(0, 0) scale(1) rotate(0deg);\n    }\n    25% {\n      transform: translate(30px, -30px) scale(1.1) rotate(90deg);\n    }\n    50% {\n      transform: translate(-20px, 20px) scale(0.95) rotate(180deg);\n    }\n    75% {\n      transform: translate(20px, 30px) scale(1.05) rotate(270deg);\n    }\n  }\n\n  /* Content with stagger animation */\n  .am-chat-welcome-card-content {\n    position: relative;\n    z-index: 2;\n    padding: 0 40px;\n  }\n\n  .am-chat-welcome-card-content > * {\n    opacity: 0;\n    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  .am-chat-welcome-card-content > *:nth-child(1) {\n    animation-delay: 0.1s;\n  }\n\n  .am-chat-welcome-card-content > *:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  .am-chat-welcome-card-content > *:nth-child(3) {\n    animation-delay: 0.3s;\n  }\n\n  .am-chat-welcome-card-content > *:nth-child(4) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes fadeInUp {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* Modernized close button */\n  .am-chat-welcome-card-close {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    background: linear-gradient(135deg,\n      rgba(255, 255, 255, 0.9),\n      rgba(255, 255, 255, 0.7));\n    backdrop-filter: blur(10px);\n    border: 1px solid rgba(0, 0, 0, 0.06);\n    width: 28px;\n    height: 28px;\n    border-radius: 10px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #64748b;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0;\n    z-index: 3;\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.04),\n      inset 0 1px 0 rgba(255, 255, 255, 0.5);\n  }\n\n  .am-chat-welcome-card-close:hover {\n    background: linear-gradient(135deg,\n      rgba(239, 68, 68, 0.1),\n      rgba(239, 68, 68, 0.05));\n    color: #ef4444;\n    transform: scale(1.1) rotate(90deg);\n    box-shadow:\n      0 4px 12px rgba(239, 68, 68, 0.2),\n      inset 0 1px 0 rgba(255, 255, 255, 0.5);\n  }\n\n  .am-chat-welcome-card-close:active {\n    transform: scale(0.95) rotate(90deg);\n  }\n\n  .am-chat-welcome-card-close svg {\n    width: 16px;\n    height: 16px;\n    transition: transform 0.3s ease;\n  }\n\n  /* Enhanced welcome message */\n  .am-chat-welcome-card-message {\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.5;\n    background: linear-gradient(135deg,\n      #1e293b 0%,\n      #64748b 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n    margin-bottom: 20px;\n    padding: 0 8px;\n    letter-spacing: -0.02em;\n    position: relative;\n  }\n\n  /* Animated underline - short line that moves from left to right */\n  .am-chat-welcome-card-message::after {\n    content: '';\n    position: absolute;\n    bottom: -8px;\n    left: 8px;\n    width: 20%;\n    height: 2px;\n    background: var(--chat-toggle-background-color, #2563eb);\n    opacity: 0.5;\n    border-radius: 2px;\n    animation: moveLeftToRight 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s infinite;\n  }\n\n  @keyframes moveLeftToRight {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(400%);\n    }\n  }\n\n  /* Prompts container inside welcome card */\n  .am-chat-welcome-card-prompts {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-bottom: 20px;\n    padding: 0 16px;\n    width: 100%;\n  }\n\n  /* Individual prompt buttons inside welcome card */\n  .am-chat-welcome-card-prompt {\n    background: linear-gradient(135deg,\n      rgba(255, 255, 255, 0.9) 0%,\n      rgba(255, 255, 255, 0.7) 100%);\n    backdrop-filter: blur(10px);\n    color: #374151;\n    border: 1px solid rgba(0, 0, 0, 0.08);\n    border-radius: 12px;\n    padding: 12px 16px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    text-align: left;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    line-height: 1.4;\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.04),\n      inset 0 1px 0 rgba(255, 255, 255, 0.5);\n    font-family: inherit;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .am-chat-welcome-card-prompt:hover {\n    background: var(--chat-button-color, #2563eb);\n    color: var(--chat-button-text-color, #ffffff);\n    transform: translateY(-2px) scale(1.02);\n    box-shadow:\n      0 6px 16px rgba(0, 0, 0, 0.12),\n      inset 0 1px 0 rgba(255, 255, 255, 0.2);\n    border-color: rgba(0, 0, 0, 0.12);\n  }\n\n  .am-chat-welcome-card-prompt:active {\n    transform: translateY(0) scale(0.98);\n    box-shadow:\n      0 2px 6px rgba(0, 0, 0, 0.08),\n      inset 0 1px 0 rgba(255, 255, 255, 0.2);\n  }\n\n  /* Shimmer effect on prompt buttons */\n  .am-chat-welcome-card-prompt::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n      90deg,\n      transparent,\n      rgba(255, 255, 255, 0.3),\n      transparent\n    );\n    transition: left 0.5s ease;\n  }\n\n  .am-chat-welcome-card-prompt:hover::before {\n    left: 100%;\n  }\n\n  /* Enhanced toggle button container with magnetic effect */\n  .am-chat-welcome-card-toggle-container {\n    display: flex;\n    justify-content: center;\n    margin-bottom: 16px;\n    position: relative;\n    padding: 4px;\n  }\n\n  .am-chat-welcome-card-toggle-container .am-chat-toggle {\n    position: relative !important;\n    transform: none !important;\n    margin: 0 !important;\n    min-width: 120px;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    filter: drop-shadow(0 4px 16px rgba(37, 99, 235, 0.2));\n  }\n\n  .am-chat-welcome-card-toggle-container .am-chat-toggle .am-chat-toggle-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .am-chat-welcome-card-toggle-container .am-chat-toggle:hover {\n    transform: translateY(-2px) scale(1.05) !important;\n    filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.3));\n  }\n\n  .am-chat-welcome-card-toggle-container .am-chat-toggle:active {\n    transform: translateY(0) scale(0.98) !important;\n  }\n\n  /* Pulse ring animation for CTA - DISABLED */\n  /* Removed pulsing rectangle around button */\n\n  /* Modernized footer with better hierarchy */\n  .am-chat-welcome-card-footer {\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.025em;\n    color: #94a3b8;\n    margin-top: 16px;\n    opacity: 0.6;\n    transition: opacity 0.2s ease;\n  }\n\n  .am-chat-floating-welcome-card:hover .am-chat-welcome-card-footer {\n    opacity: 0.4;\n  }\n\n  /* Position adjustments for different corners */\n  .am-chat-widget[data-position=\"bottom-left\"] .am-chat-floating-welcome-card {\n    left: 20px;\n    right: auto;\n    transform-origin: bottom left;\n  }\n\n  .am-chat-widget[data-position=\"top-right\"] .am-chat-floating-welcome-card {\n    top: 20px;\n    bottom: auto;\n    transform-origin: top right;\n  }\n\n  .am-chat-widget[data-position=\"top-left\"] .am-chat-floating-welcome-card {\n    top: 20px;\n    left: 20px;\n    right: auto;\n    bottom: auto;\n    transform-origin: top left;\n  }\n\n  /* Mobile responsive with better animations */\n  @media (max-width: 768px) {\n    .am-chat-floating-welcome-card {\n      left: 16px !important;\n      right: 16px !important;\n      bottom: calc(16px + var(--sticky-bottom-offset, 0px)) !important;\n      top: auto !important;\n      width: auto;\n      max-width: none;\n      padding: 44px 0px 16px;\n      transform-origin: bottom center;\n      border-radius: 18px;\n    }\n\n    .am-chat-welcome-card-content {\n      padding: 0 24px;\n    }\n\n    .am-chat-welcome-card-toggle-container {\n      margin-bottom: 12px;\n    }\n\n    .am-chat-welcome-card-message {\n      font-size: 14px;\n      margin-bottom: 16px;\n    }\n\n    .am-chat-welcome-card-footer {\n      margin-top: 14px;\n    }\n\n    @keyframes magneticSlideIn {\n      0% {\n        transform: translateY(40px) scale(0.95);\n        opacity: 0;\n      }\n      100% {\n        transform: translateY(0) scale(1);\n        opacity: 1;\n      }\n    }\n  }\n\n  /* Dark mode support */\n  @media (prefers-color-scheme: dark) {\n    .am-chat-floating-welcome-card {\n      background: linear-gradient(135deg,\n        rgba(30, 41, 59, 0.95) 0%,\n        rgba(30, 41, 59, 0.85) 100%);\n      border: 1px solid rgba(255, 255, 255, 0.1);\n      box-shadow:\n        0 8px 32px rgba(0, 0, 0, 0.3),\n        0 24px 48px rgba(0, 0, 0, 0.2),\n        inset 0 1px 0 rgba(255, 255, 255, 0.05);\n    }\n\n    .am-chat-welcome-card-message {\n      background: linear-gradient(135deg,\n        #e2e8f0 0%,\n        #94a3b8 100%);\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      background-clip: text;\n    }\n\n    .am-chat-welcome-card-close {\n      background: linear-gradient(135deg,\n        rgba(51, 65, 85, 0.9),\n        rgba(51, 65, 85, 0.7));\n      border: 1px solid rgba(255, 255, 255, 0.1);\n      color: #94a3b8;\n    }\n  }\n";