/* N8N Chatbot Widget Styles */
.chatbot-container { position: fixed; bottom: 20px; right: 20px; z-index: 9998; font-family: "IBM Plex Sans", sans-serif; }

/* Chat Toggle Button */
.chat-toggle-btn { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--color-orange) 0%, #FF8C00 100%); border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(246, 155, 9, 0.4); display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; }
.chat-toggle-btn:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(246, 155, 9, 0.5); }
.chat-toggle-btn:active { transform: scale(0.95); }
.chat-toggle-btn svg { width: 28px; height: 28px; fill: white; transition: transform 0.3s ease; }
.chat-toggle-btn.active svg { transform: rotate(180deg); }

/* Notification Badge */
.chat-notification { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; background: #FF4444; border-radius: 50%; border: 2px solid white; display: none; animation: pulse 2s infinite; }
.chat-notification.show { display: block; }

@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } }

/* Chat Window */
.chat-window { position: absolute; bottom: 80px; right: 0; width: 330px; height: 500px; background: white; border-radius: 16px; box-shadow: 0 8px 32px rgba(24, 8, 43, 0.15); display: none; flex-direction: column; overflow: hidden; animation: slideUp 0.3s ease-out; }
.chat-window.active { display: flex; }

@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Chat Header */
.chat-header { background: linear-gradient(135deg, var(--color-purple) 0%, #2a1142 100%); color: white; padding: 20px; display: flex; align-items: center; justify-content: space-between; }
.chat-header-info { display: flex; align-items: center; gap: 12px; }
.chat-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--color-orange); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.chat-header-text h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px 0; }
.chat-header-text p { font-size: 12px; margin: 0; opacity: 0.8; }
.chat-status { display: inline-block; width: 8px; height: 8px; background: #4CAF50; border-radius: 50%; margin-right: 6px; }
.chat-close-btn { background: transparent; border: none; color: white; font-size: 24px; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.2s ease; }
.chat-close-btn:hover { background: rgba(255, 255, 255, 0.1); }

/* Chat Body (iframe container) */
.chat-body { flex: 1; background: var(--color-white); position: relative; overflow: hidden; }
.chat-iframe { width: 100%; height: 100%; border: none; }

/* Loading State */
.chat-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.chat-loading-spinner { width: 40px; height: 40px; border: 4px solid #E0E0E0; border-top: 4px solid var(--color-orange); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 12px; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.chat-loading-text { color: #666; font-size: 14px; }

/* Powered By Footer */
.chat-footer { background: white; padding: 10px; text-align: center; border-top: 1px solid #E0E0E0; font-size: 11px; color: #999; }
.chat-footer a { color: var(--color-orange); text-decoration: none; }
.chat-footer a:hover { text-decoration: underline; }

/* Responsive Design */
@media (max-width: 768px) {
    .chatbot-container { bottom: 15px; right: 15px; }
    .chat-toggle-btn { width: 56px; height: 56px; }
    .chat-toggle-btn svg { width: 26px; height: 26px; }
    .chat-window { width: calc(100vw - 30px); max-width: 380px; height: 550px; bottom: 75px; }
}

@media (max-width: 480px) {
    .chat-window { width: calc(100vw - 20px); height: calc(100vh - 100px); max-height: 600px; bottom: 70px; right: -5px; }
    .chat-header { padding: 16px; }
    .chat-avatar { width: 38px; height: 38px; font-size: 16px; }
    .chat-header-text h3 { font-size: 15px; }
}

/* Accessibility */
.chat-toggle-btn:focus, .chat-close-btn:focus { outline: 3px solid rgba(246, 155, 9, 0.5); outline-offset: 2px; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .chat-window, .chat-notification, .chat-loading-spinner { animation: none; }
    .chat-toggle-btn, .chat-toggle-btn svg { transition: none; }
}