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

Agentman Chat Widget for easy integration with web applications

export declare const inputStyles = "\n  /* ===== SHARED INPUT COMPONENT STYLES ===== */\n  \n  .am-input-component {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .am-input-container {\n    position: relative;\n    background: white;\n    /* Primary border with explicit properties */\n    border: 1px solid #e5e7eb !important;\n    border-style: solid !important;\n    border-width: 1px !important;\n    border-radius: 12px !important;\n    /* Ensure border renders in all contexts */\n    border-collapse: separate;\n    overflow: visible;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    transition: all 0.2s ease;\n    box-sizing: border-box;\n    /* Performance optimization for focus transitions */\n    will-change: border-color, box-shadow;\n  }\n  \n  /* Fallback border using box-shadow for better compatibility */\n  .am-input-container::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: 12px;\n    pointer-events: none;\n    z-index: 0;\n    /* Use inset box-shadow as more reliable border alternative */\n    box-shadow: inset 0 0 0 1px #e5e7eb;\n  }\n\n  .am-input-container:focus-within {\n    border-color: var(--chat-button-color, #2563eb) !important;\n    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    border-radius: 12px !important;\n  }\n  \n  .am-input-container:focus-within::before {\n    box-shadow: inset 0 0 0 1px var(--chat-button-color, #2563eb);\n  }\n\n  .am-input-top-bar {\n    height: 12px;\n    /* Fallback to white if container background fails */\n    background: transparent;\n    background-color: rgba(255, 255, 255, 0);\n    width: 100%;\n    border-radius: 11px 11px 0 0;\n    box-sizing: border-box;\n    position: relative;\n    z-index: 1;\n  }\n\n  .am-input-textarea {\n    width: 100%;\n    padding: 10px 12px;\n    /* Transparent with white fallback for safety */\n    background: transparent;\n    background-color: rgba(255, 255, 255, 0);\n    color: #111827;\n    border: none;\n    outline: none !important;\n    resize: none;\n    font-size: 14px;\n    line-height: 1.5;\n    min-height: 36px;\n    max-height: 180px;\n    height: 48px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    box-sizing: border-box;\n    position: relative;\n    z-index: 1;\n  }\n  \n  /* Override Shopify's focus-visible styles */\n  .am-input-textarea:focus,\n  .am-input-textarea:focus-visible {\n    outline: none !important;\n    outline-offset: 0 !important;\n    box-shadow: none !important;\n  }\n  \n  .am-input-container,\n  .am-input-container:focus,\n  .am-input-container:focus-visible,\n  .am-input-container:focus-within {\n    outline: none !important;\n    outline-offset: 0 !important;\n  }\n  \n  /* Ensure our custom focus styles take precedence */\n  .am-input-container:focus-within {\n    border-color: var(--chat-button-color, #2563eb) !important;\n    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;\n  }\n\n  .am-input-textarea::placeholder {\n    color: #9ca3af;\n  }\n\n  .am-input-bottom {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 12px;\n    /* Transparent with white fallback */\n    background: transparent;\n    background-color: rgba(255, 255, 255, 0);\n    border-radius: 0 0 11px 11px;\n    box-sizing: border-box;\n    position: relative;\n    z-index: 1;\n  }\n\n  .am-input-actions-left {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .am-input-add-btn {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    border: 1px solid #e5e7eb;\n    background: white;\n    color: #2563eb;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 18px;\n    font-weight: 500;\n    line-height: 1;\n    padding: 0px;\n    outline: none !important;\n  }\n  \n  .am-input-add-btn:focus,\n  .am-input-add-btn:focus-visible {\n    outline: none !important;\n    outline-offset: 0 !important;\n    box-shadow: none !important;\n  }\n\n  .am-input-add-btn:hover {\n    background-color: #eff6ff;\n    border-color: #2563eb;\n  }\n\n  .am-input-actions-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .am-input-send {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    border: none;\n    background-color: #f3f4f6;\n    color: #9ca3af;\n    cursor: not-allowed;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 8px;\n    outline: none !important;\n  }\n  \n  .am-input-send:focus,\n  .am-input-send:focus-visible {\n    outline: none !important;\n    outline-offset: 0 !important;\n    box-shadow: none !important;\n  }\n\n  .am-input-send:not(:disabled) {\n    background-color: var(--chat-button-color, #2563eb);\n    color: var(--chat-button-text-color, #ffffff);\n    cursor: pointer;\n  }\n\n  .am-input-send:not(:disabled):hover {\n    background-color: var(--chat-button-color, #2563eb);\n    filter: brightness(1.1);\n    transform: scale(1.05);\n  }\n\n  .am-input-send:not(:disabled):active {\n    transform: scale(0.95);\n  }\n\n  .am-input-send:disabled:hover {\n    background-color: #f3f4f6;\n    cursor: not-allowed;\n    transform: none;\n  }\n\n  .am-input-send-icon {\n    width: 20px;\n    height: 20px;\n  }\n\n  .am-input-file-input {\n    display: none;\n  }\n\n  /* Attachment preview - reuse existing styles */\n  .am-input-attachments-preview {\n    display: flex;\n    gap: 8px;\n    padding: 8px 0;\n    margin-bottom: 8px;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: thin;\n    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\n  }\n\n  .am-input-attachments-preview::-webkit-scrollbar {\n    height: 4px;\n  }\n\n  .am-input-attachments-preview::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .am-input-attachments-preview::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0.2);\n    border-radius: 2px;\n  }\n\n  /* Context-specific adjustments */\n  \n  /* Welcome screen context */\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: var(--chat-background-color, #ffffff);\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-textarea {\n      font-size: 16px; /* Prevent zoom on iOS */\n      padding: 8px 12px;\n    }\n\n    .am-input-bottom {\n      padding: 6px 12px;\n    }\n\n    .am-input-send {\n      width: 36px;\n      height: 36px;\n    }\n\n    .am-input-send-icon {\n      width: 18px;\n      height: 18px;\n    }\n\n    .am-input-add-btn {\n      width: 26px;\n      height: 26px;\n      font-size: 16px;\n    }\n\n    .am-chat-input-wrapper {\n      padding: 12px;\n    }\n  }\n";