/**
 * Chat Widget Styles
 */
.vac-widget { --vac-primary: #0073aa; position: fixed; bottom: 20px; z-index: 999999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; }
.vac-widget.vac-bottom-right { right: 20px; }
.vac-widget.vac-bottom-left { left: 20px; }
.vac-chat-button { width: 60px; height: 60px; border-radius: 50%; background: var(--vac-primary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 40px rgba(0,0,0,0.16); transition: transform 0.3s; position: relative; }
.vac-chat-button:hover { transform: scale(1.1); }
.vac-chat-button svg { width: 28px; height: 28px; color: #fff; }
.vac-chat-button .vac-icon-close { display: none; }
.vac-widget.vac-open .vac-chat-button .vac-icon-chat { display: none; }
.vac-widget.vac-open .vac-chat-button .vac-icon-close { display: block; }
.vac-unread-badge { position: absolute; top: -5px; right: -5px; background: #d63638; color: #fff; font-size: 12px; font-weight: bold; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.vac-chat-window { position: absolute; bottom: 80px; width: 370px; max-height: 550px; background: #fff; border-radius: 16px; box-shadow: 0 5px 40px rgba(0,0,0,0.16); display: none; flex-direction: column; overflow: hidden; animation: vacSlideUp 0.3s; }
.vac-widget.vac-open .vac-chat-window { display: flex; }
.vac-bottom-right .vac-chat-window { right: 0; }
.vac-bottom-left .vac-chat-window { left: 0; }
.vac-header { background: var(--vac-primary); color: #fff; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
.vac-header-info { display: flex; align-items: center; gap: 12px; }
.vac-header-avatar { position: relative; width: 45px; height: 45px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.vac-online-dot { position: absolute; bottom: 2px; right: 2px; width: 10px; height: 10px; background: #00c853; border: 2px solid var(--vac-primary); border-radius: 50%; }
.vac-header-title { font-weight: 600; font-size: 16px; }
.vac-header-subtitle { font-size: 12px; opacity: 0.9; }
.vac-header-close { background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; opacity: 0.8; }
.vac-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; max-height: 350px; }
.vac-prechat { padding: 20px; }
.vac-prechat-greeting { text-align: center; margin-bottom: 20px; color: #666; }
.vac-form-group { margin-bottom: 12px; }
.vac-form-group input { width: 100%; padding: 12px 15px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; box-sizing: border-box; }
.vac-form-group input:focus { outline: none; border-color: var(--vac-primary); }
.vac-btn-start { width: 100%; padding: 12px; background: var(--vac-primary); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.vac-messages { flex: 1; overflow-y: auto; padding: 20px; }
.vac-message { margin-bottom: 15px; display: flex; animation: vacFadeIn 0.3s; }
.vac-message.vac-visitor { justify-content: flex-end; }
.vac-message-bubble { max-width: 80%; padding: 12px 16px; border-radius: 16px; word-wrap: break-word; }
.vac-message.vac-ai .vac-message-bubble, .vac-message.vac-staff .vac-message-bubble { background: #f0f0f0; border-bottom-left-radius: 4px; }
.vac-message.vac-visitor .vac-message-bubble { background: var(--vac-primary); color: #fff; border-bottom-right-radius: 4px; }
.vac-message-time { font-size: 11px; color: #999; margin-top: 4px; }
.vac-typing { padding: 10px 20px; display: flex; gap: 4px; }
.vac-typing-dot { width: 8px; height: 8px; background: #999; border-radius: 50%; animation: vacTyping 1.4s infinite; }
.vac-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.vac-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes vacTyping { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.vac-input-area { padding: 15px; border-top: 1px solid #e0e0e0; }
.vac-input-wrapper { display: flex; align-items: flex-end; gap: 10px; background: #f5f5f5; border-radius: 24px; padding: 8px 8px 8px 16px; }
.vac-input-wrapper textarea { flex: 1; border: none; background: none; resize: none; font-size: 14px; max-height: 100px; padding: 6px 0; }
.vac-input-wrapper textarea:focus { outline: none; }
.vac-send-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--vac-primary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vac-send-btn svg { width: 18px; height: 18px; color: #fff; }
.vac-rating { padding: 20px; text-align: center; border-top: 1px solid #e0e0e0; }
.vac-stars { display: flex; justify-content: center; gap: 5px; }
.vac-star { font-size: 28px; color: #ddd; cursor: pointer; transition: color 0.2s; }
.vac-star:hover, .vac-star.active { color: #ffb900; }
.vac-footer { padding: 10px; text-align: center; font-size: 11px; color: #999; border-top: 1px solid #e0e0e0; }
@keyframes vacSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vacFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) { .vac-chat-window { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; max-height: 100%; border-radius: 0; } .vac-body { max-height: none; flex: 1; } .vac-widget.vac-open .vac-chat-button { display: none; } }