| .chat-toggle-container { |
| position: fixed; |
| bottom: 20px; |
| right: 25px; |
| z-index: 1000; |
| padding: 10px; |
| filter: drop-shadow(0 8px 12px rgba(80, 18, 76, 0.821)); |
| } |
|
|
| .chat-toggle-btn { |
| width: 72px; |
| height: 72px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); |
| color: white; |
| box-shadow: |
| 0 8px 32px rgba(102, 126, 234, 0.25), |
| 0 0 0 0 rgba(102, 126, 234, 0.7); |
| border: none; |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| position: relative; |
| overflow: visible; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| animation: float 3s ease-in-out infinite; |
| } |
|
|
| .chat-toggle-btn:hover { |
| box-shadow: |
| 0 15px 40px rgba(102, 126, 234, 0.5), |
| 0 0 0 8px rgba(102, 126, 234, 0.3); |
| transform: scale(1.1) rotate(5deg); |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 70%, #f5576c 100%); |
| } |
|
|
| @keyframes float { |
| 0%, 100% { |
| transform: translateY(0px); |
| } |
| 50% { |
| transform: translateY(-10px); |
| } |
| } |
|
|
| @keyframes chatPulse { |
| 0% { |
| transform: translate(-50%, -50%) scale(1); |
| opacity: 1; |
| } |
| 100% { |
| transform: translate(-50%, -50%) scale(1.8); |
| opacity: 0; |
| } |
| } |
|
|
| .chat-particles { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| } |
|
|
| .chat-particle { |
| position: absolute; |
| width: 4px; |
| height: 4px; |
| background: linear-gradient(45deg, #fff, #f093fb); |
| border-radius: 50%; |
| opacity: 0.8; |
| box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); |
| } |
|
|
| .chat-particle:nth-child(1) { |
| top: 20%; |
| left: 20%; |
| } |
| .chat-particle:nth-child(2) { |
| top: 20%; |
| right: 20%; |
| } |
| .chat-particle:nth-child(3) { |
| bottom: 20%; |
| left: 20%; |
| } |
| .chat-particle:nth-child(4) { |
| bottom: 20%; |
| right: 20%; |
| } |
| .chat-particle:nth-child(5) { |
| top: 50%; |
| left: 10%; |
| } |
| .chat-particle:nth-child(6) { |
| top: 50%; |
| right: 10%; |
| } |
|
|
| .chat-welcome-tooltip { |
| position: absolute; |
| right: 80px; |
| top: 50%; |
| transform: translateY(-50%); |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(102, 126, 234, 0.1)); |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| border-radius: 15px; |
| padding: 12px 16px; |
| color: white; |
| font-size: 0.9rem; |
| white-space: nowrap; |
| box-shadow: |
| 0 10px 30px rgba(0, 0, 0, 0.3), |
| 0 0 20px rgba(102, 126, 234, 0.2); |
| animation: tooltipGlow 2s ease-in-out infinite; |
| } |
|
|
| @keyframes tooltipGlow { |
| 0%, 100% { |
| box-shadow: |
| 0 10px 30px rgba(0, 0, 0, 0.3), |
| 0 0 20px rgba(102, 126, 234, 0.2); |
| } |
| 50% { |
| box-shadow: |
| 0 10px 30px rgba(0, 0, 0, 0.3), |
| 0 0 30px rgba(102, 126, 234, 0.4); |
| } |
| } |
|
|
| .tooltip-content { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .tooltip-arrow { |
| position: absolute; |
| right: -8px; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 0; |
| height: 0; |
| border-left: 8px solid rgba(102, 126, 234, 0.15); |
| border-top: 8px solid transparent; |
| border-bottom: 8px solid transparent; |
| } |
|
|
| .chat-window { |
| position: fixed; |
| bottom: 30px; |
| right: 30px; |
| width: 400px; |
| height: 600px; |
| background: linear-gradient(135deg, |
| rgba(48, 155, 159, 0.777) 0%, |
| rgba(3, 71, 107, 0.77) 50%, |
| rgba(135, 13, 9, 0.659) 100%); |
| border: 1px solid rgba(255, 255, 255, 0.25); |
| border-radius: 25px; |
| overflow: hidden; |
| box-shadow: |
| 0 20px 60px rgba(0, 0, 0, 0.3), |
| 0 0 40px rgba(102, 126, 234, 0.1); |
| z-index: 2000; |
| display: flex; |
| flex-direction: column; |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| padding: 0px; |
| animation: windowGlow 4s ease-in-out infinite; |
| } |
|
|
| @keyframes windowGlow { |
| 0%, 100% { |
| box-shadow: |
| 0 20px 60px rgba(0, 0, 0, 0.3), |
| 0 0 40px rgba(102, 126, 234, 0.1); |
| } |
| 50% { |
| box-shadow: |
| 0 20px 60px rgba(0, 0, 0, 0.3), |
| 0 0 60px rgba(102, 126, 234, 0.2); |
| } |
| } |
|
|
| .chat-window.minimized { |
| max-height: 100px; |
| } |
|
|
| .chat-header { |
| position: relative; |
| padding: 20px; |
| margin: 30px; |
| background: linear-gradient(135deg, |
| rgba(255, 255, 255, 0.25) 0%, |
| rgba(102, 126, 234, 0.2) 100%); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.25); |
| overflow: hidden; |
| border-radius: 20px; |
| box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1); |
| } |
|
|
| .header-content { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 12px; |
| position: relative; |
| z-index: 10; |
| } |
|
|
| .agent-info { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| position: relative; |
| z-index: 15; |
| } |
|
|
| .agent-avatar { |
| position: relative; |
| width: 45px; |
| height: 45px; |
| background: linear-gradient(135deg, #667eea, #764ba2, #f093fb); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.2rem; |
| box-shadow: |
| 0 5px 20px rgba(102, 126, 234, 0.4), |
| 0 0 0 2px rgba(255, 255, 255, 0.1); |
| animation: avatarGlow 3s ease-in-out infinite; |
| } |
|
|
| @keyframes avatarGlow { |
| 0%, 100% { |
| box-shadow: |
| 0 5px 20px rgba(102, 126, 234, 0.4), |
| 0 0 0 2px rgba(255, 255, 255, 0.1); |
| } |
| 50% { |
| box-shadow: |
| 0 5px 20px rgba(102, 126, 234, 0.6), |
| 0 0 0 2px rgba(255, 255, 255, 0.2), |
| 0 0 20px rgba(102, 126, 234, 0.3); |
| } |
| } |
|
|
| .status-indicator { |
| position: absolute; |
| bottom: 2px; |
| right: 2px; |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| border: 2px solid white; |
| animation: statusPulse 2s ease-in-out infinite; |
| } |
|
|
| @keyframes statusPulse { |
| 0%, 100% { |
| transform: scale(1); |
| } |
| 50% { |
| transform: scale(1.2); |
| } |
| } |
|
|
| .status-indicator.online { |
| background: linear-gradient(135deg, #4ecdc4, #44a08d); |
| box-shadow: 0 0 10px rgba(78, 205, 196, 0.6); |
| } |
|
|
| .status-indicator.offline { |
| background: #95a5a6; |
| } |
|
|
| .agent-details { |
| flex: 1; |
| position: relative; |
| z-index: 15; |
| } |
|
|
| .agent-name { |
| color: #ffffff !important; |
| font-size: 1.1rem; |
| font-weight: 700; |
| margin: 0 0 4px 0; |
| |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); |
| position: relative; |
| z-index: 20; |
| letter-spacing: 0.5px; |
| } |
|
|
| .agent-role { |
| color: #ffffff !important; |
| font-size: 0.85rem; |
| margin: 0; |
| font-weight: 500; |
| background: linear-gradient(135deg, #ffffff, #e0e0e0); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| position: relative; |
| z-index: 20; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .header-actions { |
| display: flex; |
| gap: 8px; |
| position: relative; |
| z-index: 15; |
| } |
|
|
| .header-btn { |
| width: 32px; |
| height: 32px; |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(102, 126, 234, 0.2)); |
| border: 1px solid rgba(255, 255, 255, 0.4); |
| border-radius: 8px; |
| color: #ffffff !important; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
|
|
| .header-btn:hover { |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(102, 126, 234, 0.3)); |
| border-color: rgba(255, 255, 255, 0.6); |
| color: white; |
| transform: scale(1.1); |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); |
| } |
|
|
| .header-btn.close:hover { |
| background: linear-gradient(135deg, rgba(255, 107, 107, 0.35), rgba(255, 82, 82, 0.3)); |
| border-color: rgba(255, 107, 107, 0.7); |
| color: #ff6b6b; |
| box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); |
| } |
|
|
| .status-bar { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-size: 0.75rem; |
| color: #ffffff !important; |
| position: relative; |
| z-index: 10; |
| } |
|
|
| .status-item { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| padding: 4px 8px; |
| background: rgba(255, 255, 255, 0.15); |
| border-radius: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| transition: all 0.3s ease; |
| color: #ffffff !important; |
| font-weight: 500; |
| } |
|
|
| .status-item:hover { |
| background: rgba(255, 255, 255, 0.2); |
| transform: translateY(-1px); |
| } |
|
|
| .online-status { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 4px 8px; |
| background: rgba(78, 205, 196, 0.2); |
| border-radius: 12px; |
| border: 1px solid rgba(78, 205, 196, 0.5); |
| color: #ffffff !important; |
| font-weight: 500; |
| } |
|
|
| .status-dot { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #4ecdc4, #44a08d); |
| animation: pulse 2s infinite; |
| box-shadow: 0 0 8px rgba(78, 205, 196, 0.6); |
| } |
|
|
| .online-status.offline .status-dot { |
| background: #95a5a6; |
| animation: none; |
| } |
|
|
| .header-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, |
| rgba(102, 126, 234, 0.15), |
| rgba(240, 147, 251, 0.1)); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| pointer-events: none; |
| border-radius: 20px; |
| } |
|
|
| .chat-header:hover .header-glow { |
| opacity: 1; |
| } |
|
|
| .header-quick-actions { |
| padding: 6px 12px; |
| display: flex; |
| gap: 6px; |
| background: linear-gradient(135deg, |
| rgba(40, 40, 60, 0.2) 0%, |
| rgba(102, 126, 234, 0.1) 100%); |
| box-shadow: |
| 0 1px 8px rgba(102, 126, 234, 0.1), |
| 0 0 10px rgba(102, 126, 234, 0.05); |
| border-radius: 20px; |
| margin: 0 30px 8px 30px; |
| position: relative; |
| z-index: 5; |
| } |
|
|
| .header-quick-action-btn { |
| position: relative; |
| flex: 1; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 4px; |
| padding: 6px 10px; |
| background: linear-gradient(135deg, |
| rgba(255, 255, 255, 0.1) 0%, |
| rgba(102, 126, 234, 0.06) 100%); |
| border: 1px solid rgba(255, 255, 255, 0.15); |
| border-radius: 15px; |
| color: #ffffff !important; |
| font-size: 0.7rem; |
| font-weight: 400; |
| cursor: pointer; |
| transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| overflow: hidden; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); |
| min-height: 28px; |
| } |
|
|
| .header-quick-action-btn:hover { |
| background: linear-gradient(135deg, |
| rgba(255, 255, 255, 0.15) 0%, |
| rgba(102, 126, 234, 0.1) 100%); |
| border-color: rgba(255, 255, 255, 0.3); |
| color: white; |
| transform: translateY(-1px) scale(1.01); |
| box-shadow: |
| 0 4px 15px rgba(102, 126, 234, 0.2), |
| 0 0 10px rgba(102, 126, 234, 0.1); |
| } |
|
|
| .header-action-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, |
| rgba(102, 126, 234, 0.2), |
| rgba(240, 147, 251, 0.1)); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| pointer-events: none; |
| } |
|
|
| .header-quick-action-btn:hover .header-action-glow { |
| opacity: 1; |
| } |
|
|
| .chat-messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 0; |
| max-height: 450px; |
| background: linear-gradient(135deg, |
| rgba(255, 255, 255, 0.08) 0%, |
| rgba(102, 126, 234, 0.05) 100%); |
| } |
|
|
| .messages-container { |
| padding: 10px 12px; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .message { |
| display: flex; |
| gap: 12px; |
| align-items: flex-start; |
| animation: messageSlideIn 0.5s ease-out; |
| } |
|
|
| @keyframes messageSlideIn { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .message.user { |
| flex-direction: row-reverse; |
| } |
|
|
| .message-avatar { |
| position: relative; |
| width: 35px; |
| height: 35px; |
| background: rgba(255, 255, 255, 0.2); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 0.9rem; |
| flex-shrink: 0; |
| border: 1px solid rgba(255, 255, 255, 0.4); |
| transition: all 0.3s ease; |
| } |
|
|
| .message-avatar:hover { |
| transform: scale(1.1); |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); |
| } |
|
|
| .message.user .message-avatar { |
| background: linear-gradient(135deg, #4ecdc4, #45b7d1); |
| box-shadow: 0 2px 10px rgba(78, 205, 196, 0.3); |
| } |
|
|
| .message.bot .message-avatar { |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); |
| } |
|
|
| .avatar-glow { |
| position: absolute; |
| top: -2px; |
| right: -2px; |
| width: 16px; |
| height: 16px; |
| background: linear-gradient(135deg, #f6d365, #fda085); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-size: 8px; |
| animation: sparkle 2s ease-in-out infinite; |
| box-shadow: 0 2px 8px rgba(246, 211, 101, 0.5); |
| } |
|
|
| @keyframes sparkle { |
| 0%, 100% { |
| transform: scale(1) rotate(0deg); |
| opacity: 1; |
| } |
| 50% { |
| transform: scale(1.2) rotate(180deg); |
| opacity: 0.8; |
| } |
| } |
|
|
| .message-content { |
| flex: 1; |
| max-width: 70%; |
| } |
|
|
| .message.user .message-content { |
| display: flex; |
| flex-direction: column; |
| align-items: flex-end; |
| } |
|
|
| .message-bubble { |
| position: relative; |
| padding: 12px 16px; |
| border-radius: 18px; |
| background: rgba(255, 255, 255, 0.2); |
| border: 1px solid rgba(255, 255, 255, 0.4); |
| overflow: hidden; |
| transition: all 0.3s ease; |
| } |
|
|
| .message-bubble:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2); |
| } |
|
|
| .message.user .message-bubble { |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(102, 126, 234, 0.2)); |
| border-color: rgba(255, 255, 255, 0.4); |
| box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); |
| } |
|
|
| .message.bot .message-bubble { |
| background: linear-gradient(135deg, |
| rgba(255, 255, 255, 0.25) 0%, |
| rgba(102, 126, 234, 0.2) 100%); |
| border: 1px solid rgba(255, 255, 255, 0.5); |
| } |
|
|
| .message-bubble p { |
| margin: 0; |
| color: #ffffff !important; |
| font-size: 0.9rem; |
| line-height: 1.4; |
| font-weight: 600; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .message-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, |
| rgba(255, 255, 255, 0.25), |
| rgba(102, 126, 234, 0.2)); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| pointer-events: none; |
| } |
|
|
| .message-bubble:hover .message-glow { |
| opacity: 1; |
| } |
|
|
| .message-time { |
| font-size: 0.7rem; |
| color: #ffffff !important; |
| margin-top: 4px; |
| font-weight: 500; |
| opacity: 0.9; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .message.user .message-time { |
| text-align: right; |
| } |
|
|
| .typing-indicator { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 12px 16px; |
| background: linear-gradient(135deg, |
| rgba(255, 255, 255, 0.2) 0%, |
| rgba(102, 126, 234, 0.15) 100%); |
| border-radius: 18px; |
| border: 1px solid rgba(255, 255, 255, 0.4); |
| } |
|
|
| .typing-dots { |
| display: flex; |
| gap: 4px; |
| } |
|
|
| .typing-dots .dot { |
| width: 6px; |
| height: 6px; |
| background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(102, 126, 234, 0.8)); |
| border-radius: 50%; |
| animation: typingDot 1.4s ease-in-out infinite; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .typing-dots .dot:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
|
|
| .typing-dots .dot:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
|
|
| @keyframes typingDot { |
| 0%, 60%, 100% { |
| transform: translateY(0); |
| opacity: 0.4; |
| } |
| 30% { |
| transform: translateY(-10px); |
| opacity: 1; |
| } |
| } |
|
|
| .typing-indicator span { |
| color: #ffffff !important; |
| font-size: 0.8rem; |
| font-style: italic; |
| opacity: 1; |
| font-weight: 500; |
| } |
|
|
| .quick-actions { |
| padding: 10px 12px; |
| border-top: 1px solid rgba(255, 255, 255, 0.2); |
| display: flex; |
| gap: 12px; |
| margin-top: 48px; |
| background: linear-gradient(135deg, |
| rgba(40, 40, 60, 0.3) 0%, |
| rgba(102, 126, 234, 0.2) 100%); |
| box-shadow: |
| 0 2px 12px rgba(102, 126, 234, 0.2), |
| 0 0 20px rgba(102, 126, 234, 0.1); |
| border-radius: 16px; |
| z-index: 1002; |
| position: relative; |
| } |
|
|
| .quick-action-btn { |
| position: relative; |
| flex: 1; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 6px; |
| padding: 10px 12px; |
| background: linear-gradient(135deg, |
| rgba(255, 255, 255, 0.15) 0%, |
| rgba(102, 126, 234, 0.1) 100%); |
| border: 1px solid rgba(255, 255, 255, 0.25); |
| border-radius: 12px; |
| color: #ffffff !important; |
| font-size: 0.8rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| overflow: hidden; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .quick-action-btn:hover { |
| background: linear-gradient(135deg, |
| rgba(255, 255, 255, 0.25) 0%, |
| rgba(102, 126, 234, 0.2) 100%); |
| border-color: rgba(255, 255, 255, 0.5); |
| color: white; |
| transform: translateY(-3px) scale(1.02); |
| box-shadow: |
| 0 8px 25px rgba(102, 126, 234, 0.3), |
| 0 0 20px rgba(102, 126, 234, 0.2); |
| } |
|
|
| .action-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, |
| rgba(102, 126, 234, 0.3), |
| rgba(240, 147, 251, 0.2)); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| pointer-events: none; |
| } |
|
|
| .quick-action-btn:hover .action-glow { |
| opacity: 1; |
| } |
|
|
| .chat-input-container { |
| padding: 10px 12px; |
| border-top: 1px solid rgba(255, 255, 255, 0.2); |
| background: linear-gradient(135deg, |
| rgba(182, 175, 175, 0.4) 0%, |
| rgba(102, 126, 234, 0.2) 100%); |
| } |
|
|
| .input-wrapper { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| color: darkgoldenrod; |
| background: linear-gradient(135deg, |
| rgba(116, 122, 148, 0.5) 0%, |
| rgba(102, 126, 234, 0.3) 100%); |
| border: 1px solid rgba(67, 127, 206, 0.5); |
| border-radius: 25px; |
| padding: 8px 12px; |
| transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| box-shadow: |
| 0 2px 12px rgba(102, 126, 234, 0.2), |
| 0 0 20px rgba(102, 126, 234, 0.1); |
| } |
|
|
| .input-wrapper:focus-within { |
| border-color: rgba(102, 126, 234, 0.7); |
| box-shadow: |
| 0 0 20px rgba(102, 126, 234, 0.6), |
| 0 0 40px rgba(102, 126, 234, 0.3); |
| background: linear-gradient(135deg, |
| rgba(116, 122, 148, 0.7) 0%, |
| rgba(102, 126, 234, 0.5) 100%); |
| transform: scale(1.02); |
| } |
|
|
| .input-action-btn { |
| width: 32px; |
| height: 32px; |
| background: transparent; |
| border: none; |
| border-radius: 50%; |
| color: rgba(255, 255, 255, 0.5); |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.3s ease; |
| } |
|
|
| .input-action-btn:hover { |
| background: rgba(255, 255, 255, 0.25); |
| color: rgb(223, 185, 185); |
| transform: scale(1.1); |
| } |
|
|
| .chat-input { |
| flex: 1; |
| background: linear-gradient(135deg, |
| rgba(255, 255, 255, 0.25) 0%, |
| rgba(102, 126, 234, 0.2) 100%); |
| border: 1.5px solid rgba(102, 126, 234, 0.4); |
| outline: none; |
| color: #ffffff !important; |
| font-size: 0.9rem; |
| |
| padding: 8px 12px; |
| border-radius: 14px; |
| box-shadow: 0 1px 6px rgba(102, 126, 234, 0.2); |
| transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| font-weight: 500; |
| } |
|
|
| .chat-input:focus { |
| border: 1.5px solid #764ba2; |
| box-shadow: |
| 0 2px 12px rgba(118, 75, 162, 0.6), |
| 0 0 20px rgba(118, 75, 162, 0.3); |
| transform: scale(1.01); |
| } |
|
|
| .chat-input::placeholder { |
| color: rgba(255, 255, 255, 0.8) !important; |
| font-weight: 400; |
| } |
|
|
| .send-btn { |
| position: relative; |
| width: 36px; |
| height: 36px; |
| background: linear-gradient(135deg, #667eea, #764ba2, #f093fb); |
| border: none; |
| border-radius: 50%; |
| color: white; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| overflow: hidden; |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); |
| } |
|
|
| .send-btn:hover { |
| transform: scale(1.1) rotate(5deg); |
| box-shadow: |
| 0 8px 25px rgba(102, 126, 234, 0.5), |
| 0 0 20px rgba(102, 126, 234, 0.3); |
| background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c); |
| } |
|
|
| .send-btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| transform: none; |
| box-shadow: none; |
| } |
|
|
| .send-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle, |
| rgba(255, 255, 255, 0.4), |
| transparent); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
|
|
| .send-btn:hover .send-glow { |
| opacity: 1; |
| } |
|
|
| .input-footer { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-top: 8px; |
| font-size: 0.7rem; |
| color: #ffffff !important; |
| opacity: 0.9; |
| font-weight: 500; |
| } |
|
|
| .powered-by, |
| .encryption-badge { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| padding: 4px 8px; |
| background: rgba(255, 255, 255, 0.15); |
| border-radius: 8px; |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| transition: all 0.3s ease; |
| color: #ffffff !important; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .powered-by:hover, |
| .encryption-badge:hover { |
| background: rgba(255, 255, 255, 0.2); |
| transform: translateY(-1px); |
| } |
|
|
| .chat-messages::-webkit-scrollbar { |
| width: 6px; |
| } |
|
|
| .chat-messages::-webkit-scrollbar-track { |
| background: rgba(255, 255, 255, 0.15); |
| border-radius: 3px; |
| } |
|
|
| .chat-messages::-webkit-scrollbar-thumb { |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(102, 126, 234, 0.5)); |
| border-radius: 3px; |
| } |
|
|
| .chat-messages::-webkit-scrollbar-thumb:hover { |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(102, 126, 234, 0.7)); |
| } |
|
|
| @media (max-width: 1024px) { |
| .chat-toggle-container { |
| bottom: 20px; |
| right: 20px; |
| } |
|
|
| .chat-toggle-btn { |
| width: 68px; |
| height: 68px; |
| } |
|
|
| .chat-window { |
| width: 90vw; |
| height: 85vh; |
| bottom: 15px; |
| right: 15px; |
| left: 15px; |
| border-radius: 20px; |
| } |
|
|
| .chat-header { |
| padding: 15px 20px; |
| } |
|
|
| .agent-name { |
| font-size: 16px; |
| } |
|
|
| .agent-role { |
| font-size: 12px; |
| } |
|
|
| .quick-actions { |
| gap: 10px; |
| padding: 15px 20px; |
| } |
|
|
| .quick-action-btn { |
| padding: 10px 14px; |
| font-size: 13px; |
| min-width: 100px; |
| } |
|
|
| .chat-input-container { |
| padding: 15px 20px; |
| } |
|
|
| .input-wrapper { |
| padding: 12px 16px; |
| } |
|
|
| .chat-input { |
| font-size: 15px; |
| } |
|
|
| .message-content { |
| font-size: 15px; |
| line-height: 1.5; |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .chat-toggle-container { |
| bottom: 15px; |
| right: 15px; |
| } |
|
|
| .chat-toggle-btn { |
| width: 64px; |
| height: 64px; |
| } |
|
|
| .chat-window { |
| width: 95vw; |
| height: 85vh; |
| bottom: 10px; |
| right: 10px; |
| left: 10px; |
| border-radius: 18px; |
| } |
|
|
| .chat-header { |
| padding: 12px 16px; |
| } |
|
|
| .header-content { |
| gap: 12px; |
| } |
|
|
| .agent-avatar { |
| width: 40px; |
| height: 40px; |
| font-size: 18px; |
| } |
|
|
| .agent-name { |
| font-size: 15px; |
| } |
|
|
| .agent-role { |
| font-size: 11px; |
| } |
|
|
| .header-actions { |
| gap: 8px; |
| } |
|
|
| .header-btn { |
| width: 32px; |
| height: 32px; |
| font-size: 14px; |
| } |
|
|
| .quick-actions { |
| gap: 8px; |
| padding: 12px 16px; |
| flex-wrap: wrap; |
| } |
|
|
| .quick-action-btn { |
| padding: 8px 12px; |
| font-size: 12px; |
| min-width: 90px; |
| flex: 1 1 calc(50% - 4px); |
| } |
|
|
| .chat-messages { |
| padding: 15px 16px; |
| } |
|
|
| .message { |
| margin-bottom: 12px; |
| } |
|
|
| .message-avatar { |
| width: 32px; |
| height: 32px; |
| font-size: 14px; |
| } |
|
|
| .message-content { |
| font-size: 14px; |
| line-height: 1.4; |
| padding: 10px 12px; |
| } |
|
|
| .chat-input-container { |
| padding: 12px 16px; |
| } |
|
|
| .input-wrapper { |
| padding: 10px 14px; |
| } |
|
|
| .chat-input { |
| font-size: 14px; |
| } |
|
|
| .input-action-btn { |
| width: 36px; |
| height: 36px; |
| font-size: 16px; |
| } |
|
|
| .send-btn { |
| width: 36px; |
| height: 36px; |
| font-size: 16px; |
| } |
| } |
|
|
| @media (max-width: 767px) and (orientation: landscape) { |
| .chat-window { |
| height: 90vh; |
| bottom: 5px; |
| top: 5px; |
| } |
|
|
| .chat-header { |
| padding: 8px 12px; |
| } |
|
|
| .agent-avatar { |
| width: 32px; |
| height: 32px; |
| font-size: 16px; |
| } |
|
|
| .agent-name { |
| font-size: 14px; |
| } |
|
|
| .agent-role { |
| font-size: 10px; |
| } |
|
|
| .quick-actions { |
| padding: 8px 12px; |
| gap: 6px; |
| } |
|
|
| .quick-action-btn { |
| padding: 6px 10px; |
| font-size: 11px; |
| min-width: 80px; |
| } |
|
|
| .chat-messages { |
| padding: 10px 12px; |
| } |
|
|
| .message-content { |
| font-size: 13px; |
| padding: 8px 10px; |
| } |
|
|
| .chat-input-container { |
| padding: 8px 12px; |
| } |
|
|
| .input-wrapper { |
| padding: 8px 12px; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .chat-toggle-container { |
| bottom: 10px; |
| right: 10px; |
| } |
|
|
| .chat-toggle-btn { |
| width: 56px; |
| height: 56px; |
| } |
|
|
| .chat-window { |
| width: 100vw; |
| height: 100vh; |
| bottom: 0; |
| right: 0; |
| left: 0; |
| border-radius: 0; |
| max-width: 100vw; |
| max-height: 100vh; |
| } |
|
|
| .chat-header { |
| padding: 10px 12px; |
| border-radius: 0; |
| } |
|
|
| .header-content { |
| gap: 10px; |
| } |
|
|
| .agent-avatar { |
| width: 36px; |
| height: 36px; |
| font-size: 16px; |
| } |
|
|
| .agent-name { |
| font-size: 14px; |
| line-height: 1.2; |
| } |
|
|
| .agent-role { |
| font-size: 10px; |
| line-height: 1.2; |
| } |
|
|
| .header-actions { |
| gap: 6px; |
| } |
|
|
| .header-btn { |
| width: 28px; |
| height: 28px; |
| font-size: 12px; |
| } |
|
|
| .quick-actions { |
| gap: 6px; |
| padding: 10px 12px; |
| flex-wrap: wrap; |
| } |
|
|
| .quick-action-btn { |
| padding: 8px 10px; |
| font-size: 11px; |
| min-width: 80px; |
| flex: 1 1 calc(50% - 3px); |
| } |
|
|
| .chat-messages { |
| padding: 12px; |
| } |
|
|
| .message { |
| margin-bottom: 10px; |
| } |
|
|
| .message-avatar { |
| width: 28px; |
| height: 28px; |
| font-size: 12px; |
| } |
|
|
| .message-content { |
| font-size: 13px; |
| line-height: 1.3; |
| padding: 8px 10px; |
| } |
|
|
| .message-bubble { |
| max-width: 85%; |
| } |
|
|
| .chat-input-container { |
| padding: 10px 12px; |
| } |
|
|
| .input-wrapper { |
| padding: 8px 12px; |
| } |
|
|
| .chat-input { |
| font-size: 13px; |
| } |
|
|
| .input-action-btn { |
| width: 32px; |
| height: 32px; |
| font-size: 14px; |
| } |
|
|
| .send-btn { |
| width: 32px; |
| height: 32px; |
| font-size: 14px; |
| } |
|
|
| .input-footer { |
| padding: 8px 12px; |
| font-size: 11px; |
| } |
| } |
|
|
| @media (max-width: 375px) { |
| .chat-toggle-btn { |
| width: 52px; |
| height: 52px; |
| } |
|
|
| .chat-header { |
| padding: 8px 10px; |
| } |
|
|
| .agent-avatar { |
| width: 32px; |
| height: 32px; |
| font-size: 14px; |
| } |
|
|
| .agent-name { |
| font-size: 13px; |
| } |
|
|
| .agent-role { |
| font-size: 9px; |
| } |
|
|
| .header-btn { |
| width: 26px; |
| height: 26px; |
| font-size: 11px; |
| } |
|
|
| .quick-action-btn { |
| padding: 6px 8px; |
| font-size: 10px; |
| min-width: 70px; |
| } |
|
|
| .message-avatar { |
| width: 26px; |
| height: 26px; |
| font-size: 11px; |
| } |
|
|
| .message-content { |
| font-size: 12px; |
| padding: 6px 8px; |
| } |
|
|
| .input-action-btn { |
| width: 30px; |
| height: 30px; |
| font-size: 13px; |
| } |
|
|
| .send-btn { |
| width: 30px; |
| height: 30px; |
| font-size: 13px; |
| } |
| } |
|
|
| @media (max-width: 319px) { |
| .chat-toggle-btn { |
| width: 48px; |
| height: 48px; |
| } |
|
|
| .chat-header { |
| padding: 6px 8px; |
| } |
|
|
| .agent-avatar { |
| width: 28px; |
| height: 28px; |
| font-size: 12px; |
| font-size: 12px; |
| } |
|
|
| .agent-name { |
| font-size: 12px; |
| } |
|
|
| .agent-role { |
| font-size: 8px; |
| } |
|
|
| .header-btn { |
| width: 24px; |
| height: 24px; |
| font-size: 10px; |
| } |
|
|
| .quick-action-btn { |
| padding: 5px 7px; |
| font-size: 9px; |
| min-width: 60px; |
| } |
|
|
| .message-avatar { |
| width: 24px; |
| height: 24px; |
| font-size: 10px; |
| } |
|
|
| .message-content { |
| font-size: 11px; |
| padding: 5px 7px; |
| } |
|
|
| .input-action-btn { |
| width: 28px; |
| height: 28px; |
| font-size: 12px; |
| } |
|
|
| .send-btn { |
| width: 28px; |
| height: 28px; |
| font-size: 12px; |
| } |
| } |
|
|
| .chat-window { |
| animation: slideInUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
|
|
| @keyframes slideInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px) scale(0.95); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| } |
| } |
|
|
| .chat-message-enter { |
| animation: messageSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
|
|
| .quick-action-btn { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .quick-action-btn::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); |
| transition: left 0.5s; |
| } |
|
|
| .quick-action-btn:hover::before { |
| left: 100%; |
| } |
|
|
| .chat-window { |
| backdrop-filter: blur(20px) saturate(180%); |
| -webkit-backdrop-filter: blur(20px) saturate(180%); |
| } |
|
|
| .chat-header { |
| backdrop-filter: blur(10px) saturate(150%); |
| -webkit-backdrop-filter: blur(10px) saturate(150%); |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .chat-pulse-ring, |
| .chat-pulse-ring-2, |
| .chat-particle, |
| .typing-dots .dot, |
| .avatar-glow { |
| animation: none; |
| } |
|
|
| .chat-toggle-btn, |
| .header-btn, |
| .quick-action-btn, |
| .send-btn { |
| transition: none; |
| } |
| } |
|
|
| @media (prefers-contrast: high) { |
| .chat-window { |
| background: rgba(0, 0, 0, 0.9); |
| border: 2px solid white; |
| } |
|
|
| .message-bubble { |
| border: 2px solid white; |
| } |
|
|
| .chat-input { |
| border: 2px solid white; |
| } |
| } |
|
|
| .chat-toggle-btn:focus, |
| .header-btn:focus, |
| .quick-action-btn:focus, |
| .send-btn:focus, |
| .chat-input:focus { |
| outline: 2px solid rgba(102, 126, 234, 0.5); |
| outline-offset: 2px; |
| } |
