| | |
| | |
| | |
| | |
| |
|
| | #inputContainer { |
| | display: flex; |
| | align-items: center; |
| | flex: 1; |
| | background: linear-gradient(145deg, #1a1a1a, #141414); |
| | border-radius: 2rem; |
| | border: 1px solid rgba(255, 255, 255, 0.1); |
| | padding: 0.25rem; |
| | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| | max-width: 100%; |
| | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| | } |
| |
|
| | #inputContainer:focus-within { |
| | border-color: var(--color-primary); |
| | background: linear-gradient(145deg, #1f1f1f, #1a1a1a); |
| | box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2); |
| | transform: translateY(-1px); |
| | } |
| |
|
| | #userInput { |
| | flex: 1; |
| | padding: 0.75rem 0.75rem; |
| | border-radius: 2rem; |
| | border: 1px solid transparent; |
| | background-color: transparent; |
| | color: #e0e0e0; |
| | font-size: 1rem; |
| | outline: none; |
| | transition: border-color 0.2s, background-color 0.2s; |
| | word-break: break-word; |
| | overflow-wrap: break-word; |
| | max-width: 100%; |
| | min-width: 0; |
| | font-family: 'Inter', sans-serif; |
| | } |