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

Agentman Chat Widget for easy integration with web applications

export declare const inputBarEnhancedStyles = "\n  /* ============================================\n     ENHANCED INPUT BAR WITH DAYDREAM PATTERNS\n     Features:\n     - Dynamic height expansion (48px \u2192 88px)\n     - Progressive button disclosure\n     - Blue glow shadow on focus\n     - GPU-accelerated animations\n     - Field-sizing for auto-resize\n     - Micro-interactions\n     ============================================ */\n\n  /* Input Bar Container - Modern Compact Design */\n  .am-chat-input-bar {\n    position: fixed;\n    bottom: 12px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: min(520px, calc(100% - 32px));\n    z-index: 100000;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  /* Mobile: Full width with safe area */\n  @media (max-width: 768px) {\n    .am-chat-input-bar {\n      width: calc(100% - 16px);\n      bottom: max(8px, env(safe-area-inset-bottom));\n    }\n  }\n\n  /* Main Input Container - Enhanced with Daydream patterns */\n  .am-chat-input-bar-main {\n    position: relative;\n    background: #FFFFFF;\n    border-radius: 24px;\n    box-shadow:\n      0 4px 16px rgba(0, 0, 0, 0.08),\n      0 2px 8px rgba(0, 0, 0, 0.04),\n      0 0 0 1px rgba(0, 0, 0, 0.05);\n    border: none;\n    display: flex;\n    align-items: flex-start; /* Changed for vertical expansion */\n    gap: 0;\n    min-height: 48px; /* Start small like Daydream */\n    overflow: hidden;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n\n    /* GPU Optimization - Daydream pattern */\n    transform: translateZ(0);\n    -webkit-transform: translateZ(0);\n    will-change: transform, box-shadow, min-height;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    transform-style: preserve-3d;\n  }\n\n  /* Focused State - Enhanced with Daydream expansion */\n  .am-chat-input-bar-main.focused,\n  .am-chat-input-bar-main:focus-within {\n    min-height: 88px; /* Expand like Daydream */\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.12),\n      0 4px 16px rgba(0, 0, 0, 0.08),\n      0 0 24px rgba(201, 208, 245, 0.8), /* Blue glow from Daydream */\n      0 0 0 2px rgba(59, 130, 246, 0.15);\n    transform: translateY(-2px) translateX(-50%);\n  }\n\n  /* Branded Zone - Unchanged but with better alignment */\n  .am-chat-input-bar-brand {\n    display: flex;\n    align-items: center;\n    gap: 0;\n    background: color-mix(in srgb, var(--chat-toggle-background-color, #3B82F6) 15%, white);\n    border-radius: 24px 0 0 24px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n    position: relative;\n    padding-right: 16px;\n    padding-left: 44px;\n    min-height: 48px; /* Match container min-height */\n    align-self: stretch; /* Stretch to match container height */\n  }\n\n  .am-chat-input-bar-brand:hover {\n    background: color-mix(in srgb, var(--chat-toggle-background-color, #3B82F6) 20%, white);\n  }\n\n  /* Brand Logo */\n  .am-chat-input-bar-logo {\n    position: absolute;\n    left: 6px;\n    top: 12px; /* Fixed position instead of centering */\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: var(--chat-toggle-background-color, linear-gradient(135deg, #3B82F6, #2563EB));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--chat-toggle-icon-color, white);\n    font-size: 18px;\n    font-weight: 600;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    transition: all 0.2s ease;\n  }\n\n  /* Logo pulse animation on thinking */\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      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    }\n    50% {\n      opacity: 0.8;\n      transform: scale(0.95);\n      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  /* Brand Text */\n  .am-chat-input-bar-brand-text {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--chat-toggle-text-color, white);\n    white-space: nowrap;\n    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;\n    letter-spacing: -0.01em;\n  }\n\n  /* Input Field Container - New wrapper for better control */\n  .am-chat-input-bar-input-wrapper {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    padding: 8px 16px;\n    min-height: 48px;\n  }\n\n  /* Enhanced Input Field with Daydream auto-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: 4px 0;\n    min-height: 32px;\n    max-height: 120px;\n    resize: none;\n\n    /* Modern field sizing from Daydream */\n    field-sizing: content;\n    -webkit-field-sizing: content;\n\n    /* Smooth transitions */\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  /* For browsers that don't support field-sizing, use JavaScript fallback */\n  @supports not (field-sizing: content) {\n    .am-chat-input-bar-field {\n      overflow-y: auto;\n    }\n  }\n\n  .am-chat-input-bar-field::placeholder {\n    color: #9CA3AF;\n    font-weight: 400;\n    transition: opacity 0.3s ease;\n  }\n\n  /* Hide placeholder on focus for cleaner look */\n  .am-chat-input-bar-main.focused .am-chat-input-bar-field::placeholder {\n    opacity: 0.5;\n  }\n\n  /* Typewriter Text (when not focused) */\n  .am-chat-input-bar-typewriter {\n    position: absolute;\n    top: 50%;\n    left: 16px;\n    right: 16px;\n    transform: translateY(-50%);\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    pointer-events: none;\n    transition: opacity 0.3s ease;\n  }\n\n  /* Hide typewriter on focus */\n  .am-chat-input-bar-main.focused .am-chat-input-bar-typewriter {\n    opacity: 0;\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  /* Action Buttons Container - Progressive Disclosure (Daydream pattern) */\n  .am-chat-input-bar-actions {\n    position: absolute;\n    bottom: 8px;\n    right: 8px;\n    display: flex;\n    gap: 6px;\n    opacity: 0;\n    pointer-events: none;\n    transform: translateY(4px);\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  /* Show actions on focus with smooth animation */\n  .am-chat-input-bar-main.focused .am-chat-input-bar-actions,\n  .am-chat-input-bar-main:focus-within .am-chat-input-bar-actions {\n    opacity: 1;\n    pointer-events: auto;\n    transform: translateY(0);\n  }\n\n  /* Individual Action Buttons - Daydream style */\n  .am-chat-input-bar-action {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    position: relative;\n    overflow: hidden;\n    background: rgba(243, 244, 246, 0.8);\n    color: #6b7280;\n  }\n\n  /* Hover state with elevation */\n  .am-chat-input-bar-action:hover {\n    background: rgba(229, 231, 235, 0.9);\n    color: #4b5563;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  }\n\n  /* Active state with micro-interaction */\n  .am-chat-input-bar-action:active {\n    transform: scale(0.92);\n    transition: transform 0.1s ease;\n  }\n\n  /* Primary action button (Send) */\n  .am-chat-input-bar-action.primary {\n    background: var(--chat-toggle-background-color, #3b82f6);\n    color: white;\n  }\n\n  .am-chat-input-bar-action.primary:hover {\n    background: var(--chat-toggle-hover-color, #2563eb);\n    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);\n  }\n\n  /* Ripple effect on click */\n  .am-chat-input-bar-action::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(255, 255, 255, 0.5);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n  }\n\n  .am-chat-input-bar-action:active::after {\n    animation: ripple 0.4s ease;\n  }\n\n  @keyframes ripple {\n    from {\n      width: 0;\n      height: 0;\n      opacity: 1;\n    }\n    to {\n      width: 40px;\n      height: 40px;\n      opacity: 0;\n    }\n  }\n\n  /* Menu Icon - Enhanced with rotation */\n  .am-chat-input-bar-menu {\n    position: absolute;\n    right: 8px;\n    top: 8px;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    cursor: pointer;\n    color: #9CA3AF;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .am-chat-input-bar-menu:hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: #6b7280;\n    transform: rotate(90deg);\n  }\n\n  .am-chat-input-bar-menu svg {\n    width: 20px;\n    height: 20px;\n    transition: inherit;\n  }\n\n  /* Icon styles for action buttons */\n  .am-chat-input-bar-action svg {\n    width: 18px;\n    height: 18px;\n    stroke-width: 2;\n  }\n\n  /* Prompts Container - Enhanced with blur backdrop */\n  .am-chat-input-bar-prompts {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: calc(100% + 8px);\n    background: rgba(255, 255, 255, 0.95);\n    backdrop-filter: blur(24px) saturate(200%);\n    -webkit-backdrop-filter: blur(24px) saturate(200%);\n    border-radius: 18px;\n    padding: 8px;\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.06),\n      0 1px 6px rgba(0, 0, 0, 0.04),\n      inset 0 1px 0 rgba(255, 255, 255, 0.8);\n    border: 1px solid rgba(0, 0, 0, 0.06);\n    display: flex;\n    gap: 6px;\n    opacity: 0;\n    transform: translateY(4px) scale(0.98);\n    pointer-events: none;\n    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  /* Show prompts when focused */\n  .am-chat-input-bar-main.focused + .am-chat-input-bar-prompts {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    pointer-events: auto;\n  }\n\n  /* Prompt Button - Compact Pills */\n  .am-chat-input-bar-prompt {\n    flex: 1;\n    padding: 8px 14px;\n    background: rgba(255, 255, 255, 0.8);\n    border: 1px solid rgba(0, 0, 0, 0.04);\n    border-radius: 10px;\n    font-size: 13px;\n    color: #4b5563;\n    cursor: pointer;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;\n    font-weight: 450;\n    position: relative;\n  }\n\n  .am-chat-input-bar-prompt:hover {\n    background: white;\n    border-color: rgba(99, 102, 241, 0.2);\n    color: #1f2937;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  }\n\n  .am-chat-input-bar-prompt:active {\n    transform: translateY(0);\n  }\n\n  /* Mobile: Stack prompts vertically */\n  @media (max-width: 480px) {\n    .am-chat-input-bar-prompts {\n      flex-direction: column;\n    }\n\n    .am-chat-input-bar-prompt {\n      width: 100%;\n    }\n\n    /* Adjust main container for mobile */\n    .am-chat-input-bar-main.focused {\n      max-height: 50dvh; /* Dynamic viewport height */\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-main.focused {\n      box-shadow:\n        0 8px 32px rgba(0, 0, 0, 0.4),\n        0 0 24px rgba(99, 102, 241, 0.3),\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-action {\n      background: rgba(75, 85, 99, 0.5);\n      color: #9ca3af;\n    }\n\n    .am-chat-input-bar-action: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  /* Loading state for input bar */\n  .am-chat-input-bar-main.loading {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .am-chat-input-bar-main.loading .am-chat-input-bar-logo {\n    animation: spin 1s linear infinite;\n  }\n\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n\n  /* Accessibility improvements */\n  .am-chat-input-bar-action:focus-visible,\n  .am-chat-input-bar-menu:focus-visible {\n    outline: 2px solid var(--chat-toggle-background-color, #3b82f6);\n    outline-offset: 2px;\n  }\n\n  .am-chat-input-bar-field:focus-visible {\n    outline: none; /* Handled by container focus styles */\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    .am-chat-input-bar-main {\n      border: 2px solid currentColor;\n    }\n\n    .am-chat-input-bar-action {\n      border: 1px solid currentColor;\n    }\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    .am-chat-input-bar-main,\n    .am-chat-input-bar-actions,\n    .am-chat-input-bar-action,\n    .am-chat-input-bar-prompts {\n      transition-duration: 0.01ms !important;\n    }\n\n    .am-chat-input-bar-logo,\n    .am-chat-input-bar-menu {\n      animation: none !important;\n    }\n  }\n";