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

Agentman Chat Widget for easy integration with web applications

export declare const inputBarStyles = "\n  /* Input Bar Container - Modern Compact Design with GPU Optimization */\n  .am-chat-input-bar {\n    position: fixed;\n    bottom: calc(12px + env(safe-area-inset-bottom, 0px)); /* Safari safe area */\n    left: 50%;\n    transform: translateX(-50%) translateZ(0); /* GPU acceleration */\n    width: min(520px, calc(100% - 32px));\n    z-index: 100000;\n    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Elastic easing */\n    will-change: transform;\n    backface-visibility: hidden;\n    perspective: 1000px;\n    max-height: 80dvh; /* Mobile keyboard handling */\n  }\n\n  /* Subtle glow wrapper - sits behind the main input */\n  .am-chat-input-bar::before {\n    content: '';\n    position: absolute;\n    inset: -4px;\n    border-radius: 28px;\n    background: linear-gradient(\n      135deg,\n      rgba(99, 102, 241, 0.3) 0%,\n      rgba(168, 85, 247, 0.3) 25%,\n      rgba(236, 72, 153, 0.3) 50%,\n      rgba(99, 102, 241, 0.3) 100%\n    );\n    background-size: 200% 200%;\n    opacity: 0.4;\n    filter: blur(20px);\n    animation: inputBarGradientGlow 8s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n    transition: all 0.3s ease;\n  }\n\n  @keyframes inputBarGradientGlow {\n    0%, 100% {\n      background-position: 0% 50%;\n    }\n    50% {\n      background-position: 100% 50%;\n    }\n  }\n\n  /* Subtle ambient orb - even further behind */\n  .am-chat-input-bar::after {\n    content: '';\n    position: absolute;\n    inset: -80px -60px;\n    background: radial-gradient(\n      ellipse at center,\n      rgba(139, 92, 246, 0.15) 0%,\n      rgba(168, 85, 247, 0.1) 30%,\n      transparent 60%\n    );\n    opacity: 0.3;\n    filter: blur(60px);\n    animation: inputBarOrbPulse 10s ease-in-out infinite;\n    z-index: -2;\n    pointer-events: none;\n    transition: all 0.3s ease;\n  }\n\n  @keyframes inputBarOrbPulse {\n    0%, 100% {\n      transform: scale(1);\n    }\n    50% {\n      transform: scale(1.05);\n    }\n  }\n\n  /* Moderate glow enhancement on focus */\n  .am-chat-input-bar:has(.am-chat-input-bar-main.focused)::before {\n    opacity: 0.7;\n    filter: blur(28px);\n    inset: -6px;\n    animation: inputBarGradientGlow 4s ease-in-out infinite;\n  }\n\n  .am-chat-input-bar:has(.am-chat-input-bar-main.focused)::after {\n    opacity: 0.5;\n    filter: blur(80px);\n    transform: scale(1.1);\n  }\n\n  /* Mobile: Full width + safe area handling */\n  @media (max-width: 768px) {\n    .am-chat-input-bar {\n      width: calc(100% - 24px);\n      bottom: calc(8px + env(safe-area-inset-bottom, 0px));\n    }\n  }\n\n  /* Main Input Container - Premium Glassmorphism */\n  .am-chat-input-bar-main {\n    position: relative;\n    background: rgba(255, 255, 255, 0.85);\n    backdrop-filter: blur(16px) saturate(180%);\n    -webkit-backdrop-filter: blur(16px) saturate(180%);\n    border-radius: 24px;\n    padding: 0;\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.06),\n      0 1px 2px rgba(0, 0, 0, 0.08),\n      inset 0 1px 1px rgba(255, 255, 255, 0.5);\n    border: 1px solid rgba(255, 255, 255, 0.6);\n    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n    display: flex;\n    align-items: center;\n    gap: 0;\n    height: 48px;\n    overflow: visible;\n    transform: translateZ(0);\n    will-change: height, box-shadow, transform;\n    backface-visibility: hidden;\n    perspective: 1000px;\n  }\n\n  /* Focused State - Enhanced Glassmorphism */\n  .am-chat-input-bar-main.focused {\n    height: 80px;\n    align-items: center;\n    background: rgba(255, 255, 255, 0.9);\n    backdrop-filter: blur(20px) saturate(200%);\n    -webkit-backdrop-filter: blur(20px) saturate(200%);\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.08),\n      0 2px 4px rgba(0, 0, 0, 0.06),\n      inset 0 1px 2px rgba(255, 255, 255, 0.8);\n    transform: translateY(-2px) scale(1.01);\n    border: 1px solid rgba(255, 255, 255, 0.8);\n  }\n\n  /* Show gradient border on focus */\n  .am-chat-input-bar-main.focused::before {\n    opacity: 0.6;\n  }\n\n  /* Enhanced background gradient animation on focus */\n  .am-chat-input-bar-main.focused::after {\n    opacity: 0.5;\n    filter: blur(80px);\n  }\n\n  @keyframes glowPulse {\n    0%, 100% {\n      opacity: 0.6;\n      filter: saturate(1) brightness(1);\n    }\n    50% {\n      opacity: 1;\n      filter: saturate(1.3) brightness(1.15);\n    }\n  }\n\n  /* Branded Zone - Refined Modern Design */\n  .am-chat-input-bar-brand {\n    display: flex;\n    align-items: center;\n    gap: 0;\n    background: var(--chat-input-bar-brand-background, color-mix(in srgb, var(--chat-toggle-background-color, #0066FF) 8%, white));\n    border-radius: 24px 0 0 24px;\n    border: 1px solid color-mix(in srgb, var(--chat-input-bar-brand-background, var(--chat-toggle-background-color, #0066FF)) 85%, white);\n    cursor: pointer;\n    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n    flex-shrink: 0;\n    position: relative;\n    padding-right: 16px;\n    padding-left: 16px;\n    height: 48px;\n    overflow: hidden;\n  }\n\n  /* Subtle gradient overlay for premium feel */\n  .am-chat-input-bar-brand::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(\n      135deg,\n      rgba(255, 255, 255, 0.15) 0%,\n      transparent 50%\n    );\n    pointer-events: none;\n    border-radius: inherit;\n  }\n\n  /* Brand zone collapses to circular icon on focus */\n  .am-chat-input-bar-main.focused .am-chat-input-bar-brand {\n    width: 56px; /* Square for perfect circle */\n    height: 56px;\n    padding-left: 0;\n    padding-right: 0;\n    border-radius: 50%; /* Full circle */\n    justify-content: center;\n    margin-left: 12px; /* Add spacing from edge */\n  }\n\n  .am-chat-input-bar-brand:hover {\n    background: color-mix(in srgb, var(--chat-input-bar-brand-background, var(--chat-toggle-background-color, #3B82F6)) 110%, white);\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  }\n\n  .am-chat-input-bar-brand:active {\n    transform: scale(0.98) translateY(0);\n  }\n\n  /* Brand Logo - No Circle, Just Icon */\n  .am-chat-input-bar-logo {\n    position: relative;\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--chat-input-bar-logo-icon, var(--chat-input-bar-brand-text, #0066FF));\n    flex-shrink: 0;\n    margin-right: 8px;\n    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n\n  /* Logo adjustments when focused (no margin when text is hidden) */\n  .am-chat-input-bar-main.focused .am-chat-input-bar-logo {\n    margin-right: 0;\n    width: 32px;\n    height: 32px;\n  }\n\n  /* Robot/AI Icon in Logo - Clean with Micro-interactions */\n  .am-chat-input-bar-logo svg {\n    width: 28px;\n    height: 28px;\n    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n\n  /* Playful rotation on hover */\n  .am-chat-input-bar-brand:hover .am-chat-input-bar-logo svg {\n    transform: rotate(-8deg);\n  }\n\n  /* Scale up when focused with subtle shadow */\n  .am-chat-input-bar-main.focused .am-chat-input-bar-logo svg {\n    width: 32px;\n    height: 32px;\n    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));\n  }\n\n  /* Brand Text - Clean and Confident */\n  .am-chat-input-bar-brand-text {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--chat-input-bar-brand-text, #0066FF);\n    white-space: nowrap;\n    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;\n    letter-spacing: -0.02em;\n    user-select: none;\n    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n\n  /* Subtle micro-interaction on hover */\n  .am-chat-input-bar-brand:hover .am-chat-input-bar-brand-text {\n    transform: translateX(2px);\n  }\n\n  /* Hide text when focused - only show icon */\n  .am-chat-input-bar-main.focused .am-chat-input-bar-brand-text {\n    opacity: 0;\n    width: 0;\n    overflow: hidden;\n    margin: 0;\n  }\n\n  /* Thinking Animation for Logo */\n  .am-chat-input-bar-brand.thinking .am-chat-input-bar-logo {\n    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n\n  @keyframes pulse {\n    0%, 100% {\n      opacity: 1;\n      transform: scale(1);\n    }\n    50% {\n      opacity: 0.8;\n      transform: scale(0.95);\n    }\n  }\n\n  /* Typing Indicator in Brand Zone */\n  .am-chat-input-bar-brand.typing::after {\n    content: '';\n    position: absolute;\n    bottom: 8px;\n    right: 8px;\n    width: 24px;\n    height: 4px;\n    background: linear-gradient(\n      90deg,\n      var(--chat-toggle-background-color, #0066FF) 0%,\n      var(--chat-toggle-background-color, #0066FF) 33%,\n      transparent 33%,\n      transparent 66%,\n      var(--chat-toggle-background-color, #0066FF) 66%\n    );\n    background-size: 300% 100%;\n    animation: typingWave 1s linear infinite;\n    border-radius: 2px;\n    opacity: 0.6;\n  }\n\n  @keyframes typingWave {\n    0% { background-position: 100% 0; }\n    100% { background-position: 0% 0; }\n  }\n\n  /* Plus Icon Button - Hidden by default when brand zone exists */\n  .am-chat-input-bar-plus {\n    display: none; /* Will be replaced by brand zone */\n  }\n\n  /* Optional: Plus button for file attachments (separate from brand) */\n  .am-chat-input-bar-attach {\n    flex-shrink: 0;\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: #9ca3af;\n    transition: all 0.2s ease;\n    border-radius: 8px;\n    margin-left: 4px;\n  }\n\n  .am-chat-input-bar-attach:hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: #6b7280;\n  }\n\n  .am-chat-input-bar-attach svg {\n    width: 20px;\n    height: 20px;\n    stroke-width: 2;\n  }\n\n  /* Input Field - Auto-Resize with Field Sizing */\n  .am-chat-input-bar-field {\n    flex: 1;\n    background: none;\n    border: none;\n    outline: none;\n    font-size: 15px;\n    color: #111827;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    line-height: 1.5;\n    padding: 16px; /* Padding for expanded state */\n    height: auto;\n    min-height: 48px;\n    max-height: 120px; /* Limit expansion */\n    resize: none;\n    overflow-y: auto;\n    field-sizing: content; /* Auto-resize textarea */\n    transition: font-size 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), padding 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);\n    display: none; /* Hidden by default, shown via JS on focus */\n    position: relative;\n    \n  }\n\n  /* Larger font and more breathing room when focused */\n  .am-chat-input-bar-main.focused .am-chat-input-bar-field {\n    padding: 20px 16px;\n    font-size: 16px;\n    line-height: 1.6;\n  }\n\n  .am-chat-input-bar-field::placeholder {\n    color: #9CA3AF;\n    font-weight: 400;\n  }\n\n  /* Focus hint */\n  .am-chat-input-bar-field:focus::placeholder {\n    opacity: 0.7;\n  }\n\n  /* Typewriter Text (when not focused) */\n  .am-chat-input-bar-typewriter {\n    flex: 1;\n    font-size: 15px;\n    color: #9ca3af;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    line-height: 1.5;\n    white-space: nowrap;\n    overflow: hidden;\n    padding: 0 16px; /* Match input field padding */\n    height: 48px; /* Match input field height */\n    display: flex;\n    align-items: center;\n    position: relative;\n    \n  }\n\n  .am-chat-input-bar-typewriter::after {\n    content: '|';\n    animation: blink 1s step-end infinite;\n    margin-left: 2px;\n  }\n\n  @keyframes blink {\n    0%, 50% { opacity: 1; }\n    51%, 100% { opacity: 0; }\n  }\n\n  /* Right Icons Container */\n  .am-chat-input-bar-icons {\n    display: flex;\n    gap: 4px;\n    flex-shrink: 0;\n    padding-right: 8px; /* Padding from right edge */\n    position: relative;\n    \n  }\n\n  /* Menu Icon Button - Integrated into Layout Flow */\n  .am-chat-input-bar-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--chat-input-bar-button-background, color-mix(in srgb, var(--chat-toggle-background-color, #3B82F6) 10%, white));\n    border: none;\n    border-radius: 12px;\n    cursor: pointer;\n    color: var(--chat-input-bar-button-icon, #6B7280);\n    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Elastic easing */\n    margin-right: 8px;\n    flex-shrink: 0;\n    opacity: 0;\n    pointer-events: none;\n    transform: scale(0.8) rotate(-90deg) translateZ(0);\n    will-change: transform, opacity;\n    backface-visibility: hidden;\n  }\n\n  /* Show button on focus with staggered animation (Progressive Disclosure) */\n  .am-chat-input-bar-main.focused .am-chat-input-bar-icon {\n    opacity: 1;\n    pointer-events: auto;\n    transform: scale(1) rotate(0deg) translateZ(0);\n    transition-delay: 0.1s; /* Staggered appearance */\n  }\n\n  .am-chat-input-bar-icon:hover {\n    background: color-mix(in srgb, var(--chat-input-bar-button-background, var(--chat-toggle-background-color, #3B82F6)) 150%, white);\n    color: var(--chat-input-bar-logo-background, var(--chat-toggle-background-color, #3B82F6));\n  }\n\n  .am-chat-input-bar-icon:active {\n    transform: scale(0.95) translateZ(0);\n  }\n\n  /* Menu icon specific rotation on hover */\n  .am-chat-input-bar-menu:hover {\n    transform: rotate(90deg) translateZ(0);\n  }\n\n  .am-chat-input-bar-icon svg {\n    width: 20px;\n    height: 20px;\n    transition: inherit;\n  }\n\n  /* Microphone Active State */\n  .am-chat-input-bar-icon.recording {\n    background: rgba(239, 68, 68, 0.1);\n    color: #ef4444;\n    animation: recordPulse 1.5s ease-in-out infinite;\n  }\n\n  @keyframes recordPulse {\n    0%, 100% {\n      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);\n    }\n    50% {\n      box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);\n    }\n  }\n\n  /* Prompts Container - Premium Glassmorphism */\n  .am-chat-input-bar-prompts {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: calc(100% + 12px);\n    background: rgba(255, 255, 255, 0.85);\n    backdrop-filter: blur(16px) saturate(180%);\n    -webkit-backdrop-filter: blur(16px) saturate(180%);\n    border-radius: 20px;\n    padding: 10px;\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.06),\n      0 1px 2px rgba(0, 0, 0, 0.08),\n      inset 0 1px 1px rgba(255, 255, 255, 0.5);\n    border: 1px solid rgba(255, 255, 255, 0.6);\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 8px;\n    opacity: 0;\n    transform: translateY(12px) scale(0.95);\n    filter: blur(4px);\n    pointer-events: none;\n    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n    will-change: transform, opacity, filter;\n    backface-visibility: hidden;\n  }\n\n  /* Show prompts when focused with enhanced animation */\n  .am-chat-input-bar-main.focused + .am-chat-input-bar-prompts {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    filter: blur(0);\n    pointer-events: auto;\n    animation: promptSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n\n  @keyframes promptSlide {\n    0% {\n      opacity: 0;\n      transform: translateY(12px) scale(0.95);\n      filter: blur(4px);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n      filter: blur(0);\n    }\n  }\n\n  /* Prompt Button - Glassmorphic Pills */\n  .am-chat-input-bar-prompt {\n    flex: 0 1 auto;\n    padding: 8px 14px;\n    background: rgba(255, 255, 255, 0.75);\n    backdrop-filter: blur(12px) saturate(150%);\n    -webkit-backdrop-filter: blur(12px) saturate(150%);\n    border: 1px solid rgba(255, 255, 255, 0.5);\n    border-radius: 12px;\n    font-size: 13px;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s cubic-bezier(0.23, 1, 0.320, 1);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n    min-width: 120px;\n    max-width: 280px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;\n    font-weight: 450;\n    box-shadow:\n      0 1px 3px rgba(0, 0, 0, 0.04),\n      inset 0 1px 1px rgba(255, 255, 255, 0.3);\n  }\n\n  .am-chat-input-bar-prompt:hover {\n    background: rgba(255, 255, 255, 0.9);\n    border-color: rgba(255, 255, 255, 0.7);\n    color: #111827;\n    transform: translateY(-2px);\n    box-shadow:\n      0 4px 12px rgba(0, 0, 0, 0.06),\n      inset 0 1px 1px rgba(255, 255, 255, 0.5);\n  }\n\n  .am-chat-input-bar-prompt:active {\n    transform: translateY(0) scale(1);\n  }\n\n  /* Mobile: Stack prompts vertically on very small screens */\n  @media (max-width: 480px) {\n    .am-chat-input-bar-prompts {\n      flex-direction: column;\n      align-items: center; /* Center prompts within container */\n    }\n\n    .am-chat-input-bar-prompt {\n      width: 100%;\n      max-width: 100%; /* Ensure full width */\n    }\n  }\n\n  /* Dark mode support */\n  @media (prefers-color-scheme: dark) {\n    .am-chat-input-bar-main {\n      background: rgba(31, 41, 55, 0.95);\n      border-color: rgba(255, 255, 255, 0.1);\n      box-shadow:\n        0 8px 32px rgba(0, 0, 0, 0.3),\n        0 2px 8px rgba(0, 0, 0, 0.2),\n        inset 0 1px 0 rgba(255, 255, 255, 0.1);\n    }\n\n    .am-chat-input-bar-field {\n      color: #f3f4f6;\n    }\n\n    .am-chat-input-bar-field::placeholder {\n      color: #6b7280;\n    }\n\n    .am-chat-input-bar-typewriter {\n      color: #6b7280;\n    }\n\n    .am-chat-input-bar-icon {\n      background: rgba(75, 85, 99, 0.5);\n      color: #9ca3af;\n    }\n\n    .am-chat-input-bar-icon:hover {\n      background: rgba(75, 85, 99, 0.8);\n      color: #f3f4f6;\n    }\n\n    .am-chat-input-bar-prompts {\n      background: rgba(31, 41, 55, 0.95);\n      border-color: rgba(255, 255, 255, 0.1);\n    }\n\n    .am-chat-input-bar-prompt {\n      background: rgba(55, 65, 81, 0.8);\n      border-color: rgba(255, 255, 255, 0.1);\n      color: #e5e7eb;\n    }\n\n    .am-chat-input-bar-prompt:hover {\n      background: rgba(75, 85, 99, 0.8);\n      border-color: rgba(255, 255, 255, 0.2);\n      color: #f3f4f6;\n    }\n  }\n\n  /* Animation for initial appearance */\n  @keyframes inputBarSlideUp {\n    from {\n      opacity: 0;\n      transform: translateX(-50%) translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0);\n    }\n  }\n\n  .am-chat-input-bar.am-chat-input-bar-enter {\n    animation: inputBarSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  /* Accessibility: Respect user's motion preferences */\n  @media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n    }\n  }\n";