UNPKG

@agentman/chat-widget

Version:

Agentman Chat Widget for easy integration with web applications

github.com/Agentman-ai/.github

Agentman-ai/.github

9 lines (8 loc) • 47.3 kB
1
2
3
4
5
6
7
8
9
/** * Styles for input-bar-sheet mode * * Clean, purpose-built styles with no CSS override battles. * The InputBarSheetWelcomeView component has a simplified DOM structure * designed specifically for the bottom sheet collapse/expand pattern. */ export declare const inputBarSheetStyles = "\n/* ========================================\n CSS VARIABLES\n ======================================== */\n\n:root {\n --ibf-collapsed-height: 72px;\n --ibf-expanded-height-desktop: 80vh;\n --ibf-expanded-height-mobile: var(--chat-mobile-height, 95vh); /* Use config or fallback to 95vh */\n --ibf-border-radius: 20px;\n\n /* Material Design 3 easing curves */\n --md3-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);\n --md3-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);\n --md3-standard: cubic-bezier(0.2, 0.0, 0, 1.0);\n\n /* Duration tokens */\n --md3-duration-short: 200ms;\n --md3-duration-medium: 300ms;\n --md3-duration-long: 400ms;\n --md3-duration-extra-long: 500ms;\n}\n\n/* ========================================\n ROOT CONTAINER - Sheet Mode Wrapper\n ======================================== */\n\n/* Root wrapper - full-width bottom anchor */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet {\n position: fixed !important;\n bottom: var(--sticky-bottom-offset, 0px) !important;\n left: 0 !important;\n right: 0 !important;\n top: auto !important;\n z-index: 100000;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n width: 100% !important;\n max-width: none !important;\n height: auto !important;\n pointer-events: none; /* Allow click-through except on children */\n\n /* CSS Variables - Borrowed from input-bar for consistency */\n --ibf-collapsed-height: 72px; /* 48px input + 12px top/bottom padding */\n --ibf-expanded-height-desktop: 80vh;\n --ibf-expanded-height-mobile: var(--chat-mobile-height, 95vh); /* Use config.mobileHeight or fallback */\n --ibf-input-padding: 12px 16px; /* Compact padding like input-bar */\n --ibf-border-radius: 20px;\n}\n\n@media (max-width: 640px) {\n .am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet {\n --ibf-collapsed-height: 68px; /* 48px input + 8px top/bottom padding */\n --ibf-input-padding: 8px 12px;\n }\n}\n\n/* Chat container - height controlled by Anime.js for smooth animations */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-container {\n pointer-events: auto;\n position: relative !important;\n width: 100% !important;\n max-width: 768px !important; /* Increased from 640px for more input room */\n margin: 0 auto;\n border-radius: var(--ibf-border-radius) var(--ibf-border-radius) 0 0;\n box-shadow: 0 -12px 48px rgba(15, 23, 42, 0.18);\n overflow: hidden;\n background: var(--chat-background-color, #ffffff);\n color: var(--chat-text-color, #111827);\n /* Height is animated by Anime.js, just transition border and shadow */\n transition:\n border-radius var(--md3-duration-short) var(--md3-standard),\n box-shadow var(--md3-duration-short) var(--md3-standard);\n display: flex !important;\n flex-direction: column !important;\n flex: none !important;\n box-sizing: border-box !important;\n}\n\n/* ========================================\n COLLAPSED STATE (72px)\n ======================================== */\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-chat-container {\n height: calc(var(--ibf-collapsed-height) + env(safe-area-inset-bottom, 0px)) !important;\n border-radius: var(--ibf-border-radius) var(--ibf-border-radius) 0 0;\n box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.15);\n border-top: 1px solid rgba(15, 23, 42, 0.08);\n}\n\n/* Hide all content except input when collapsed */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-ibf-header,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-ibf-message,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-ibf-prompts,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-ibf-bottom,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-conversation-list-view {\n display: none !important;\n visibility: hidden !important;\n height: 0 !important;\n overflow: hidden !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n\n/* Hide conversation header, messages, and branding when collapsed - with higher specificity */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-conversation-view .am-chat-header,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-conversation-view .am-chat-messages,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-conversation-view .am-chat-branding {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n height: 0 !important;\n min-height: 0 !important;\n max-height: 0 !important;\n overflow: hidden !important;\n margin: 0 !important;\n padding: 0 !important;\n flex: 0 0 0 !important;\n}\n\n/* Keep conversation view visible when collapsed, but only show the input bar */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-conversation-view {\n display: flex !important;\n flex-direction: column !important;\n justify-content: flex-end !important;\n height: 100% !important;\n overflow: hidden !important;\n}\n\n/* Ensure conversation input wrapper is visible and properly positioned when collapsed */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-conversation-view .am-chat-input-wrapper {\n display: block !important;\n flex-shrink: 0 !important;\n padding: 12px 12px !important;\n padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;\n}\n\n/* Welcome view collapsed layout */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-input-bar-full-welcome {\n display: flex !important;\n flex-direction: column !important;\n justify-content: flex-end !important;\n height: 100% !important;\n padding: 0 !important;\n overflow: hidden !important;\n}\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-ibf-content {\n display: flex !important;\n flex-direction: column !important;\n justify-content: flex-end !important;\n height: 100% !important;\n gap: 0 !important;\n padding: 0 !important;\n}\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-ibf-input-section {\n padding: 12px 20px !important; /* Match expanded state padding */\n padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;\n flex-shrink: 0 !important;\n width: 100% !important;\n}\n\n/* ========================================\n EXPANDED STATE (80vh/95vh)\n ======================================== */\n\n/* Welcome view - content-sized, capped at viewport height */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-container:not(.am-in-conversation) {\n max-height: var(--ibf-expanded-height-desktop);\n min-height: 200px;\n}\n\n/* Conversation view - fixed height for message scrolling */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-container.am-in-conversation {\n max-height: none;\n height: var(--ibf-expanded-height-desktop) !important;\n}\n\n/* Ensure conversation view input bar matches welcome screen style */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded.am-in-conversation .am-ibf-input-section,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-container.am-in-conversation .am-ibf-input-section {\n padding: 12px 20px !important;\n padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;\n}\n\n/* Apply glassmorphic styling to conversation view input wrapper - higher specificity */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-container .am-chat-input-wrapper,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-wrapper {\n padding: 12px 20px !important;\n padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;\n background: transparent !important; /* Transparent background, input container will have glassmorphism */\n background-color: transparent !important; /* Override any background-color */\n}\n\n/* Apply clean styling ONLY to expanded/conversation views - NO glassmorphism */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-input-wrapper .am-input-container,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-in-conversation .am-chat-input-wrapper .am-input-container {\n width: 100% !important; /* Full width container */\n border-radius: 28px !important; /* Pill shape */\n border: 1px solid #e5e7eb !important; /* Clean gray border */\n border-style: solid !important;\n border-width: 1px !important;\n background: #ffffff !important; /* Clean white background */\n background-color: #ffffff !important;\n backdrop-filter: none !important; /* No blur */\n -webkit-backdrop-filter: none !important;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; /* Subtle shadow */\n transition: all 0.2s ease !important;\n min-height: 52px !important; /* Allow auto-resize */\n height: auto !important; /* Auto height for multi-line */\n padding: 6px 12px !important; /* Add vertical padding for proper spacing */\n display: flex !important;\n flex-direction: row !important;\n align-items: flex-start !important; /* Align to top so it grows upward */\n gap: 8px !important;\n overflow: visible !important; /* Allow content to grow */\n position: relative !important;\n}\n\n/* Hide only the top bar in conversation view */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-wrapper .am-input-top-bar {\n display: none !important;\n}\n\n/* Restructure the bottom section to be inline */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-wrapper .am-input-bottom {\n position: static !important;\n display: flex !important;\n align-items: center !important;\n background: transparent !important;\n border: none !important;\n padding: 0 !important;\n margin: 0 !important;\n gap: 8px !important;\n}\n\n/* Hide the action containers and make buttons direct children */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-wrapper .am-input-actions-left,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-wrapper .am-input-actions-right {\n position: static !important;\n background: transparent !important;\n border: none !important;\n padding: 0 !important;\n margin: 0 !important;\n}\n\n/* Restructure the input layout for pill shape */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-wrapper .am-input-textarea {\n background: transparent !important;\n border: none !important;\n outline: none !important;\n min-height: 40px !important;\n max-height: 180px !important; /* Allow multi-line growth */\n height: auto !important; /* Auto height for multi-line */\n padding: 6px 8px !important;\n margin: 0 !important;\n resize: none !important;\n overflow-y: hidden !important; /* Hide scrollbar, grow instead */\n font-size: 15px !important;\n line-height: 22px !important; /* Fixed 22px line height */\n flex: 1 1 auto !important;\n width: auto !important;\n order: 2 !important; /* Place in middle */\n}\n\n/* Style the attach button - place on left */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-wrapper .am-input-add-btn {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n width: 32px !important;\n height: 32px !important;\n margin-top: 4px !important; /* Align with first line of text */\n background: transparent !important;\n border: none !important;\n border-radius: 50% !important;\n color: var(--chat-send-button-color, #6b7280) !important;\n cursor: pointer !important;\n flex-shrink: 0 !important;\n font-size: 18px !important;\n opacity: 0.7 !important;\n transition: all 0.2s ease !important;\n order: 1 !important; /* Place on left */\n}\n\n/* Remove focus effects for expanded/conversation views - keep consistent with welcome */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-input-wrapper .am-chat-input-container:focus-within,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-in-conversation .am-chat-input-wrapper .am-chat-input-container:focus-within {\n /* Keep the same styles as non-focused state - no visual change on focus */\n}\n\n@media (max-width: 768px) {\n .am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-container:not(.am-in-conversation) {\n max-height: var(--ibf-expanded-height-mobile);\n }\n\n .am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-container.am-in-conversation {\n height: var(--ibf-expanded-height-mobile) !important;\n }\n}\n\n/* Welcome view expanded layout */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-input-bar-full-welcome {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-ibf-content {\n display: flex;\n flex-direction: column;\n padding: 32px 24px 40px; /* Reduced bottom padding from 120px to 40px */\n gap: 24px;\n flex: 1 1 auto;\n}\n\n/* During expanding animation, lock spacing to prevent cramping */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanding .am-ibf-content {\n padding: 32px 24px 40px !important; /* Match reduced padding */\n gap: 24px !important;\n}\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanding .am-input-bar-full-welcome {\n overflow: hidden !important;\n}\n\n/* ========================================\n INPUT BAR FULL WELCOME VIEW COMPONENTS\n ======================================== */\n\n/* Minimize button - top right corner indicator */\n.am-ibf-minimize-button {\n display: none; /* Hidden by default */\n position: absolute;\n top: 12px;\n right: 12px;\n z-index: 1000;\n background: none;\n border: none;\n padding: 6px;\n cursor: pointer;\n pointer-events: none; /* Allow click-through since entire screen is clickable */\n}\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-ibf-minimize-button {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.am-ibf-minimize-button svg {\n width: 18px;\n height: 18px;\n stroke: #6b7280;\n}\n\n/* Header - logo + title */\n.am-ibf-header {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n text-align: center;\n}\n\n.am-ibf-logo {\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--chat-input-bar-logo-icon, var(--chat-toggle-icon-color, #ffffff));\n}\n\n.am-ibf-logo svg {\n width: 100%;\n height: 100%;\n color: var(--chat-input-bar-logo-icon, var(--chat-toggle-icon-color, #ffffff));\n fill: currentColor;\n}\n\n.am-ibf-title {\n font-size: 24px;\n font-weight: 600;\n color: var(--chat-text-color, #111827);\n margin: 0;\n}\n\n/* Welcome message */\n.am-ibf-message {\n font-size: 16px;\n color: var(--chat-text-color, #111827);\n text-align: center;\n opacity: 0.7;\n}\n\n/* Input section - Container for entire input area */\n.am-ibf-input-section {\n width: 100%;\n padding: 0; /* No padding, wrapper handles spacing */\n box-sizing: border-box;\n display: flex;\n align-items: center;\n position: relative;\n}\n\n/* Collapsed state - add vertical padding only */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-ibf-input-section {\n padding: 12px 20px !important;\n padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;\n width: 100%;\n flex-shrink: 0;\n}\n\n\n/* Expanded state - add padding all around */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-ibf-input-section {\n padding: 0 20px !important;\n}\n\n/* Mobile: Reduce horizontal padding to 12px from edges */\n@media (max-width: 640px) {\n .am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-ibf-input-section {\n padding: 0 12px !important;\n }\n}\n\n/* Input wrapper - Glassmorphism ONLY in collapsed state */\n.am-ibf-input-wrapper {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0;\n position: relative;\n border-radius: 24px;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n min-height: 48px !important;\n height: auto !important;\n max-height: 180px !important;\n transform: translateZ(0);\n will-change: height, box-shadow, transform;\n backface-visibility: hidden;\n outline: none !important;\n}\n\n/* In collapsed state, force fixed height so brand zone fills properly */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-ibf-input-wrapper {\n height: 48px !important;\n min-height: 48px !important;\n max-height: 48px !important;\n}\n\n/* Glassmorphism ONLY when collapsed */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-ibf-input-wrapper {\n border: 1px solid rgba(255, 255, 255, 0.6);\n background: var(--chat-input-bar-sheet-background, var(--chat-background-color, rgba(255, 255, 255, 0.85)));\n backdrop-filter: blur(16px) saturate(180%);\n -webkit-backdrop-filter: blur(16px) saturate(180%);\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}\n\n/* Clean design when expanded (no glassmorphism) */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-ibf-input-wrapper {\n border: 1px solid #e5e7eb !important;\n background: #ffffff !important;\n background-color: #ffffff !important;\n backdrop-filter: none !important;\n -webkit-backdrop-filter: none !important;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;\n}\n\n.am-ibf-input-wrapper:focus,\n.am-ibf-input-wrapper:focus-within,\n.am-ibf-input-wrapper:focus-visible {\n outline: none !important;\n outline-offset: 0 !important;\n}\n\n.am-ibf-input-wrapper::before {\n outline: none !important;\n}\n\n/* Enhanced focus state for collapsed wrapper (glassmorphic) */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-ibf-input-wrapper:has(.am-input-container:focus-within) {\n transform: translateY(-2px) scale(1.01);\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 border-color: rgba(255, 255, 255, 0.8);\n}\n\n/* Remove focus effects for expanded welcome wrapper - keep consistent */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-ibf-input-wrapper:has(.am-input-container:focus-within) {\n /* Keep the same styles as non-focused state - no visual change on focus */\n}\n\n/* Brand Zone - Pill shape with logo + text (no border, wrapper has it) */\n.am-ibf-brand-zone {\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 cursor: pointer;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n flex-shrink: 0;\n position: relative;\n padding: 0 16px;\n height: 100%; /* Fill wrapper height */\n overflow: hidden;\n}\n\n/* Subtle gradient overlay for premium feel */\n.am-ibf-brand-zone::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.am-ibf-brand-zone:hover {\n background: var(--chat-input-bar-brand-background-hover, 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-ibf-brand-zone:active {\n transform: scale(0.98) translateY(0);\n}\n\n/* Brand logo */\n.am-ibf-brand-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.am-ibf-brand-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-ibf-brand-zone:hover .am-ibf-brand-logo svg {\n transform: rotate(-8deg);\n}\n\n/* Brand text */\n.am-ibf-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-ibf-brand-zone:hover .am-ibf-brand-text {\n transform: translateX(2px);\n}\n\n/* Input placeholder - fills remaining space */\n.am-ibf-input-placeholder {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n/* Typewriter effect - shown in collapsed state when not focused */\n.am-ibf-typewriter {\n flex: 1;\n font-size: 15px;\n color: var(--chat-input-bar-typewriter-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;\n height: 48px;\n display: flex;\n align-items: center;\n position: relative;\n pointer-events: none;\n user-select: none;\n}\n\n.am-ibf-typewriter::after {\n content: '|';\n animation: ibfTypewriterBlink 1s step-end infinite;\n margin-left: 2px;\n}\n\n@keyframes ibfTypewriterBlink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\n/* Hide typewriter when expanded or when input has focus */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-ibf-typewriter,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-container:focus-within ~ .am-ibf-typewriter {\n display: none;\n}\n\n/* Hide input component in collapsed WELCOME view - show only typewriter */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-input-bar-full-welcome .am-ibf-input-placeholder,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-input-bar-full-welcome .am-input-component,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-input-bar-full-welcome .am-input-container {\n display: none !important;\n}\n\n/* Show input component in welcome view when expanded - hide typewriter */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-input-bar-full-welcome .am-ibf-input-placeholder,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-input-bar-full-welcome .am-input-component,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-input-bar-full-welcome .am-input-container {\n display: flex !important;\n}\n\n/* EXPANDED STATE - Hide brand zone completely */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-ibf-brand-zone {\n display: none !important;\n}\n\n/* EXPANDED STATE - Input wrapper gets more height */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-ibf-input-wrapper {\n height: 56px; /* Increased from 48px */\n}\n\n/* EXPANDED STATE - Welcome screen input container fills full width and rounds all corners */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-ibf-input-wrapper .am-input-container {\n border-radius: 24px !important; /* All corners rounded when brand zone hidden */\n}\n\n/* Input container IN WELCOME SCREEN ONLY - Transparent, no styling (wrapper provides everything) */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-ibf-input-wrapper .am-input-container {\n position: relative;\n border-radius: 0 24px 24px 0; /* Right side rounded */\n border: none !important; /* No border - wrapper has the border */\n background: transparent !important; /* Transparent, wrapper has glassmorphism */\n backdrop-filter: none !important;\n -webkit-backdrop-filter: none !important;\n box-shadow: none !important; /* No shadow */\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n flex: 1 1 auto !important; /* Fill remaining space */\n min-width: 0 !important; /* Allow flex shrinking */\n height: 100% !important; /* Fill wrapper height */\n display: flex !important;\n flex-direction: row !important; /* Horizontal layout */\n align-items: center !important;\n box-sizing: border-box !important;\n padding: 0 12px !important; /* Horizontal padding inside container */\n gap: 8px !important; /* Space between elements */\n outline: none !important; /* Remove focus outline */\n}\n\n/* Remove the ::before pseudo-element border for welcome screen only */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-ibf-input-wrapper .am-input-container::before {\n display: none !important;\n content: none !important;\n opacity: 0 !important;\n visibility: hidden !important;\n box-shadow: none !important;\n border: none !important;\n}\n\n/* Remove focus state ::before border for welcome screen only */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-ibf-input-wrapper .am-input-container:focus-within::before {\n display: none !important;\n content: none !important;\n opacity: 0 !important;\n visibility: hidden !important;\n box-shadow: none !important;\n border: none !important;\n}\n\n/* Remove focus outlines from welcome screen input container only */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-ibf-input-wrapper .am-input-container:focus,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-ibf-input-wrapper .am-input-container:focus-within,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-ibf-input-wrapper .am-input-container:focus-visible {\n outline: none !important;\n outline-offset: 0 !important;\n box-shadow: none !important;\n}\n\n/* Ambient glow wrapper - gradient animation */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-ibf-input-section::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/* Ambient orb - subtle pulse */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-ibf-input-section::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\n/* Intensify ambient glow on focus */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-container:focus-within ~ .am-ibf-input-section::before,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet:has(.am-input-container:focus-within) .am-ibf-input-section::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-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-container:focus-within ~ .am-ibf-input-section::after,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet:has(.am-input-container:focus-within) .am-ibf-input-section::after {\n opacity: 0.5;\n filter: blur(80px);\n transform: scale(1.1);\n}\n\n/* Remove all focus outlines globally for input-bar-sheet mode */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet *,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet *:focus,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet *:focus-within,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet *:focus-visible {\n outline: none !important;\n outline-offset: 0 !important;\n}\n\n/* Hide the top bar spacer for horizontal layout */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-top-bar {\n display: none !important;\n}\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-textarea,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-textarea {\n min-height: 24px !important; /* Allow multi-line growth */\n max-height: 180px !important; /* Max 180px before scrolling */\n height: auto !important; /* Auto height for multi-line */\n font-size: 15px;\n line-height: 22px !important; /* Fixed 22px line height */\n padding: 12px 8px !important; /* Vertical padding for proper centering */\n resize: none;\n overflow-y: hidden !important; /* Hide scrollbar, let it grow instead */\n flex: 1 1 auto !important; /* Take up remaining space */\n width: auto !important; /* Override 100% width */\n background: transparent !important; /* Transparent background */\n outline: none !important; /* Remove outline */\n outline-width: 0 !important;\n outline-style: none !important;\n outline-color: transparent !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n border: none !important;\n border-width: 0 !important;\n border-style: none !important;\n border-color: transparent !important;\n border-top: none !important;\n border-bottom: none !important;\n border-left: none !important;\n border-right: none !important;\n box-shadow: none !important;\n}\n\n/* Remove textarea focus states */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-textarea:focus,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-textarea:focus-visible,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-textarea:focus,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-textarea:focus-visible {\n background: transparent !important;\n outline: none !important;\n outline-width: 0 !important;\n outline-style: none !important;\n outline-color: transparent !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n border: none !important;\n border-width: 0 !important;\n border-style: none !important;\n border-color: transparent !important;\n border-top: none !important;\n border-bottom: none !important;\n border-left: none !important;\n border-right: none !important;\n box-shadow: none !important;\n}\n\n/* Make bottom bar inline with minimal styling */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-bottom {\n padding: 0 !important; /* No extra padding */\n background: transparent !important;\n gap: 8px !important;\n flex-shrink: 0 !important;\n}\n\n/* Buttons - compact sizing with theme support and progressive disclosure */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-add-btn,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-send {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n flex-shrink: 0;\n transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);\n transform: translateZ(0);\n will-change: transform, opacity;\n backface-visibility: hidden;\n}\n\n/* Hide send button in collapsed state, show + button for balance */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-input-send {\n display: none !important;\n}\n\n/* Show + button in collapsed state for visual balance with brand zone */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-input-add-btn {\n display: flex !important;\n opacity: 1;\n transform: scale(1) translateZ(0);\n}\n\n/* Progressive disclosure when expanded */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-input-add-btn,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-input-send {\n opacity: 1;\n transform: scale(1) translateZ(0);\n transition-delay: 0.05s;\n}\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-add-btn:hover {\n transform: scale(1.05) translateZ(0);\n}\n\n/* Active state for buttons */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-send:active,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-add-btn:active {\n transform: scale(0.95) translateZ(0);\n}\n\n/* Bottom bar - compact */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-bottom {\n padding: 0 8px;\n gap: 8px;\n}\n\n/* Prompts with theme support - matching welcome screen layout */\n.am-ibf-prompts {\n display: flex;\n flex-wrap: wrap; /* Allow wrapping */\n gap: 8px;\n width: 100%;\n padding: 0;\n margin: 0;\n justify-content: center; /* Center the buttons */\n transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;\n}\n\n/* Hide prompts when input wrapper grows (multi-line input active) */\n.am-ibf-input-wrapper.am-input-multiline ~ .am-ibf-content .am-ibf-prompts,\n.am-input-bar-full-welcome:has(.am-ibf-input-wrapper.am-input-multiline) .am-ibf-prompts {\n opacity: 0 !important;\n max-height: 0 !important;\n overflow: hidden !important;\n margin: 0 !important;\n padding: 0 !important;\n pointer-events: none !important;\n}\n\n.am-ibf-prompt-btn {\n flex: 0 0 auto; /* Don't grow or shrink, natural width */\n width: auto; /* Fit content width */\n min-width: 0; /* Allow shrinking */\n min-height: 48px; /* Better touch target size */\n font-size: 13px;\n padding: 12px 14px;\n background: #ffffff;\n color: #374151;\n border: 1px solid #e5e7eb;\n border-radius: 10px;\n box-shadow: none;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n font-weight: 500;\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n margin: 0 !important;\n}\n\n/* Remove alternating backgrounds */\n.am-ibf-prompt-btn:nth-child(odd) {\n background: #ffffff;\n}\n\n.am-ibf-prompt-btn:hover {\n background: #f9fafb;\n color: #1e40af;\n border-color: #d1d5db;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.am-ibf-prompt-btn:active {\n transform: scale(0.95);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n/* Ripple effect for touch feedback */\n.am-ibf-prompt-btn::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(37, 99, 235, 0.2);\n transform: translate(-50%, -50%);\n pointer-events: none;\n transition: width 0.6s, height 0.6s;\n}\n\n.am-ibf-prompt-btn:active::after {\n width: 200px;\n height: 200px;\n}\n\n/* Bottom section */\n.am-ibf-bottom {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px; /* Reduced gap */\n margin-top: auto;\n padding-top: 16px; /* Reduced padding */\n}\n\n.am-ibf-conversations-link {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: transparent;\n border: 1px solid rgba(15, 23, 42, 0.1);\n border-radius: 12px;\n font-size: 14px;\n color: var(--chat-text-color, #111827);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.am-ibf-conversations-link:hover {\n background: rgba(15, 23, 42, 0.05);\n border-color: rgba(15, 23, 42, 0.2);\n}\n\n.am-ibf-conversations-link svg {\n width: 18px;\n height: 18px;\n}\n\n.am-ibf-branding {\n font-size: 12px;\n color: #9ca3af;\n text-align: center;\n}\n\n.am-ibf-branding a {\n color: #9ca3af;\n text-decoration: underline;\n}\n\n/* ========================================\n BACKDROP\n ======================================== */\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-sheet-backdrop {\n content: '';\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.3);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n z-index: -1;\n}\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-sheet-backdrop {\n opacity: 1;\n pointer-events: auto;\n}\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-sheet-backdrop {\n display: none;\n}\n\n/* ========================================\n HIDE COLLAPSED SHEET (Optional)\n ======================================== */\n\n/* When showCollapsedSheet is false, make collapsed state look like input-bar-only variant */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-hide-collapsed-sheet.am-sheet-collapsed .am-chat-container {\n background: transparent !important;\n box-shadow: none !important;\n border: none !important;\n border-radius: 0 !important;\n max-width: min(520px, calc(100% - 24px)) !important; /* Desktop: 12px margin on each side */\n margin: 0 auto !important;\n height: auto !important; /* Remove fixed height to wrap content only */\n}\n\n/* Mobile: Stretch closer to edges */\n@media (max-width: 640px) {\n .am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-hide-collapsed-sheet.am-sheet-collapsed .am-chat-container {\n max-width: calc(100% - 8px) !important; /* Mobile: 8px margin on each side */\n }\n}\n\n/* Remove fixed heights from inner containers and make them transparent */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-hide-collapsed-sheet.am-sheet-collapsed .am-input-bar-full-welcome,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-hide-collapsed-sheet.am-sheet-collapsed .am-ibf-content,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-hide-collapsed-sheet.am-sheet-collapsed .am-ibf-input-section {\n height: auto !important;\n background: transparent !important;\n box-shadow: none !important;\n border: none !important;\n}\n\n/* Position the input section with proper spacing */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-hide-collapsed-sheet.am-sheet-collapsed .am-ibf-input-section {\n padding: 12px 16px !important;\n padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;\n width: 100% !important;\n}\n\n/* Mobile: Reduce internal padding to stretch input more */\n@media (max-width: 640px) {\n .am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-hide-collapsed-sheet.am-sheet-collapsed .am-ibf-input-section {\n padding: 12px 8px !important; /* Reduced from 16px to 8px */\n padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;\n }\n}\n\n/* Style the wrapper with rounded corners and position for glow effects */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-hide-collapsed-sheet.am-sheet-collapsed .am-ibf-input-wrapper {\n position: relative !important;\n background: var(--chat-input-bar-sheet-background, var(--chat-background-color, rgba(255, 255, 255, 0.85))) !important;\n backdrop-filter: blur(16px) saturate(180%) !important;\n -webkit-backdrop-filter: blur(16px) saturate(180%) !important;\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) !important;\n border: 1px solid rgba(255, 255, 255, 0.6) !important;\n border-radius: 24px !important; /* Match input-bar rounded corners */\n}\n\n/* Add gradient glow behind the input wrapper (follows rounded shape) */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-hide-collapsed-sheet.am-sheet-collapsed .am-ibf-input-wrapper::before {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 26px; /* Slightly larger than wrapper */\n background: var(--chat-input-bar-glow-color, #C2AEC8);\n opacity: 0.15;\n filter: blur(12px);\n z-index: -1;\n pointer-events: none;\n transition: all 0.3s ease;\n}\n\n/* Add subtle ambient glow (larger, softer) */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-hide-collapsed-sheet.am-sheet-collapsed .am-ibf-input-wrapper::after {\n content: '';\n position: absolute;\n inset: -8px;\n border-radius: 32px; /* Even larger radius for soft glow */\n background: var(--chat-input-bar-glow-color, #C2AEC8);\n opacity: 0.08;\n filter: blur(24px);\n z-index: -2;\n pointer-events: none;\n transition: all 0.3s ease;\n}\n\n/* ========================================\n COLLAPSE BUTTON\n ======================================== */\n\n/* Hide window control buttons in input-bar-sheet mode (but keep conversation buttons) */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-header-actions .am-chat-expand,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-header-actions .am-chat-minimize {\n display: none !important;\n}\n\n/* Collapse button - unified header button styling */\n/* IMPORTANT: Hide by default, only show when expanded */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-header-button-collapse,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-sheet-collapse {\n display: none !important; /* Hidden by default */\n}\n\n/* Standalone positioning (welcome view when expanded) */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-header-button-collapse.am-header-button-standalone {\n display: flex !important; /* Show only when expanded */\n position: absolute;\n top: 12px;\n right: 12px;\n z-index: 1000; /* High z-index to appear above welcome content */\n background: rgba(255, 255, 255, 0.9);\n border-radius: 50%;\n padding: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* When inside header actions (conversation view when expanded) */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-header-actions .am-header-button-collapse,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-header-actions .am-sheet-collapse {\n display: flex !important; /* Show only when expanded */\n position: relative;\n top: auto;\n right: auto;\n margin-left: 4px; /* Small gap between buttons */\n}\n\n/* Hide collapse button when conversation list is open */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-conversation-list-view.opening .am-header-button-collapse,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-conversation-list-view.opening .am-sheet-collapse {\n display: none !important;\n}\n\n/* ========================================\n SCROLL LOCK\n ======================================== */\n\n.am-no-scroll {\n overflow: hidden !important;\n height: 100%;\n}\n\n/* ========================================\n CONVERSATION VIEW IN SHEET MODE\n ======================================== */\n\n/* Conversation view should also respect collapsed/expanded states */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-conversation-view {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Ensure header has rounded top corners to match container */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-conversation-view .am-chat-header {\n border-radius: var(--ibf-border-radius) var(--ibf-border-radius) 0 0;\n}\n\n/* Same for conversation list view header */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-conversation-list-view .am-conversation-list-header {\n border-radius: var(--ibf-border-radius) var(--ibf-border-radius) 0 0;\n}\n\n/* Ensure messages area has proper height when expanded */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-expanded .am-chat-messages {\n min-height: 300px; /* Ensure visible area even with few messages */\n flex: 1 1 auto;\n}\n\n/* In collapsed state, hide messages completely */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet.am-sheet-collapsed .am-chat-messages {\n min-height: 0;\n height: 0;\n overflow: hidden;\n}\n\n/* ========================================\n FORCE LIGHT MODE - Override dark mode\n ======================================== */\n\n/* Force light backgrounds and text regardless of system dark mode */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-ibf-input-wrapper,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-container,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-container {\n background: #ffffff !important;\n color: #111827 !important;\n color-scheme: light !important;\n}\n\n/* Force light text in input fields */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-textarea,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-textarea {\n background: transparent !important;\n color: #111827 !important;\n color-scheme: light !important;\n}\n\n/* Force light placeholder text */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-textarea::placeholder,\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-chat-input-textarea::placeholder {\n color: #9ca3af !important;\n opacity: 1 !important;\n}\n\n/* Force light prompt buttons */\n.am-ibf-prompt-btn {\n background: #ffffff !important;\n color: #374151 !important;\n border-color: #e5e7eb !important;\n color-scheme: light !important;\n}\n\n.am-ibf-prompt-btn:hover {\n background: #f9fafb !important;\n color: #1e40af !important;\n border-color: #d1d5db !important;\n}\n\n/* Force light mode for input buttons */\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-add-btn {\n background: transparent !important;\n color: #6b7280 !important;\n}\n\n.am-chat-widget--input-bar-sheet.am-mode-input-bar-sheet .am-input-send {\n background: var(--chat-button-color, #4f46e5) !important;\n color: var(--chat-button-text-color, #ffffff) !important;\n}\n";