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

Agentman Chat Widget for easy integration with web applications

export declare const inputStyles = "\n  /* ===== UNIFIED PILL-SHAPED INPUT COMPONENT ===== */\n\n  .am-input-component {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  /* Pill-shaped container with flexbox layout */\n  .am-input-container {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 0 16px;\n    min-height: 52px;\n    position: relative;\n    background: #ffffff;\n    border: 1px solid #e5e7eb;\n    border-radius: 28px; /* Pill shape */\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    transition: box-shadow 0.2s ease;\n    box-sizing: border-box;\n    overflow: hidden; /* Keeps pill shape */\n  }\n\n  /* NO focus effects - keep consistent */\n  .am-input-container:focus-within {\n    /* No visual change on focus */\n  }\n\n  /* Attach button - positioned on left */\n  .am-input-add-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    flex-shrink: 0;\n    background: transparent;\n    border: none;\n    border-radius: 50%;\n    color: #6b7280;\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    opacity: 0.7;\n    order: 1; /* First */\n  }\n\n  .am-input-add-btn:hover {\n    opacity: 1;\n    transform: scale(1.1);\n    background: rgba(0, 0, 0, 0.05);\n  }\n\n  .am-input-add-btn:disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  .am-input-add-btn span {\n    display: block;\n    line-height: 1;\n  }\n\n  /* Textarea - positioned in middle, grows to fill space */\n  .am-input-textarea {\n    flex: 1 1 auto;\n    height: 40px; /* Initial single-line height */\n    min-height: 40px;\n    max-height: 180px; /* Max height before scrolling */\n    padding: 6px 8px;\n    background: transparent;\n    border: none;\n    outline: none;\n    resize: none;\n    overflow-y: hidden; /* Hide scrollbar, let it grow instead */\n    overflow-x: hidden; /* Hide horizontal scrollbar */\n    font-size: 15px;\n    line-height: 22px; /* Fixed 22px line height */\n    color: #111827;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    box-sizing: border-box;\n    order: 2; /* Middle */\n  }\n\n  .am-input-textarea::placeholder {\n    color: #9ca3af;\n    opacity: 1;\n  }\n\n  /* NO focus styles for textarea */\n  .am-input-textarea:focus,\n  .am-input-textarea:focus-visible {\n    outline: none;\n    border: none;\n    box-shadow: none;\n  }\n\n  /* Send button - positioned on right */\n  .am-input-send {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    flex-shrink: 0;\n    background: var(--chat-button-color, #4f46e5);\n    border: none;\n    border-radius: 50%;\n    color: var(--chat-button-text-color, #ffffff);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    order: 3; /* Last */\n    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);\n  }\n\n  .am-input-send:not(:disabled):hover {\n    transform: scale(1.1);\n    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);\n  }\n\n  .am-input-send:disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  .am-input-send-icon {\n    width: 20px;\n    height: 20px;\n  }\n\n  /* Attachment preview - shows above input */\n  .am-input-attachments-preview {\n    display: none;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding: 12px;\n    background: #f9fafb;\n    border-radius: 12px;\n    margin-bottom: 12px;\n  }\n\n  .am-input-attachments-preview[style*=\"display: flex\"] {\n    display: flex;\n  }\n\n  .chat-attachment-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    position: relative;\n  }\n\n  .chat-attachment-item.error {\n    border-color: #ef4444;\n    background: #fef2f2;\n  }\n\n  .chat-attachment-thumbnail {\n    width: 40px;\n    height: 40px;\n    object-fit: cover;\n    border-radius: 4px;\n  }\n\n  .chat-attachment-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 24px;\n  }\n\n  .chat-attachment-info {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .chat-attachment-name {\n    font-size: 13px;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .chat-attachment-remove {\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #ef4444;\n    color: white;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    font-size: 14px;\n    line-height: 1;\n    transition: all 0.2s ease;\n  }\n\n  .chat-attachment-remove:hover {\n    background: #dc2626;\n    transform: scale(1.1);\n  }\n\n  .chat-attachment-progress {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background: #e5e7eb;\n    border-radius: 0 0 7px 7px;\n    overflow: hidden;\n  }\n\n  .chat-attachment-progress-bar {\n    height: 100%;\n    background: #3b82f6;\n    transition: width 0.3s ease;\n  }\n\n  /* Welcome view context */\n  .am-welcome-input-section {\n    width: 100%;\n    padding: 0;\n  }\n\n  .am-welcome-input-section .am-input-component {\n    max-width: 100%;\n  }\n\n  /* Conversation view context */\n  .am-chat-input-wrapper {\n    padding: 14px;\n    background: transparent;\n    flex: 0 0 auto;\n    box-sizing: border-box;\n  }\n\n  .am-chat-input-wrapper .am-input-component {\n    max-width: 100%;\n  }\n\n  /* Responsive adjustments */\n  @media (max-width: 480px) {\n    .am-input-container {\n      min-height: 48px;\n      padding: 0 12px;\n      gap: 8px;\n    }\n\n    .am-input-add-btn,\n    .am-input-send {\n      width: 28px;\n      height: 28px;\n    }\n\n    .am-input-send-icon {\n      width: 18px;\n      height: 18px;\n    }\n\n    .am-input-textarea {\n      font-size: 14px;\n    }\n  }\n\n  /* ========================================\n     FORCE LIGHT MODE - Override dark mode\n     ======================================== */\n\n  /* Force light mode for input container */\n  .am-input-container {\n    background: #ffffff !important;\n    color: #111827 !important;\n    color-scheme: light !important;\n  }\n\n  /* Force light mode for textarea */\n  .am-input-textarea {\n    background: transparent !important;\n    color: #111827 !important;\n    color-scheme: light !important;\n    -webkit-text-fill-color: #111827 !important;\n  }\n\n  /* Force light mode for placeholder */\n  .am-input-textarea::placeholder {\n    color: #9ca3af !important;\n    opacity: 1 !important;\n    -webkit-text-fill-color: #9ca3af !important;\n  }\n\n  /* Force light mode for buttons */\n  .am-input-add-btn {\n    background: transparent !important;\n    color: #6b7280 !important;\n  }\n\n  .am-input-send {\n    background: var(--chat-button-color, #4f46e5) !important;\n    color: var(--chat-button-text-color, #ffffff) !important;\n  }\n";