.chat-widget{position:fixed;bottom:20px;left:20px;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.chat-bubble{position:relative;width:60px;height:60px;background:linear-gradient(135deg,#9D8F4F 0%,#e8c410 100%);border:none;border-radius:50%;box-shadow:0 4px 20px #f9d12066;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.chat-bubble:hover{transform:scale(1.1);box-shadow:0 6px 25px #f9d12099}.chat-bubble svg{width:28px;height:28px;color:#333}.chat-bubble .unread-badge{position:absolute;top:-5px;right:-5px;background:#dc3545;color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:10px;min-width:20px;text-align:center}.chat-window{position:fixed;bottom:20px;left:20px;width:380px;height:600px;max-height:calc(100vh - 40px);background:white;border-radius:12px;box-shadow:0 10px 40px #00000026;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.chat-header{background:linear-gradient(135deg,#F9D120 0%,#e8c410 100%);color:#333;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:12px 12px 0 0;box-shadow:0 2px 10px #0000001a}.chat-header-content h3{margin:0;font-size:18px;font-weight:600}.chat-header-content .chat-status{margin:4px 0 0;font-size:13px;opacity:.8}.close-chat-btn{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:opacity .2s}.close-chat-btn:hover{opacity:.7}.close-chat-btn svg{width:24px;height:24px;color:#333}.pre-chat-form{padding:24px;overflow-y:auto;flex:1}.pre-chat-form .form-content h4{margin:0 0 8px;font-size:20px;font-weight:600;color:#333}.pre-chat-form .form-content p{margin:0 0 24px;font-size:14px;color:#666}.pre-chat-form .form-group{margin-bottom:16px}.pre-chat-form label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.pre-chat-form .required{color:#dc3545}.pre-chat-form .form-control{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:border-color .2s}.pre-chat-form .form-control:focus{outline:none;border-color:#f9d120;box-shadow:0 0 0 3px #f9d1201a}.pre-chat-form textarea.form-control{resize:vertical;min-height:80px}.pre-chat-form .btn-primary{width:100%;padding:12px;background:linear-gradient(135deg,#F9D120 0%,#e8c410 100%);color:#333;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.pre-chat-form .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f9d1204d}.chat-messages-area{flex:1;overflow-y:auto;padding:16px;background:#f8f9fa;display:flex;flex-direction:column}.chat-messages{flex:1;overflow-y:auto}.message{margin-bottom:16px;display:flex;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-content{max-width:75%;padding:10px 14px;border-radius:12px;word-wrap:break-word}.message-content p{margin:0;font-size:14px;line-height:1.5}.message-time{display:block;margin-top:4px;font-size:11px;opacity:.6}.message-visitor{justify-content:flex-end}.message-visitor .message-content{background:linear-gradient(135deg,#F9D120 0%,#e8c410 100%);color:#333;border-bottom-right-radius:4px}.message-admin{justify-content:flex-start}.message-admin .message-content{background:white;color:#333;border:1px solid #e0e0e0;border-bottom-left-radius:4px}.message-sender{font-size:12px;font-weight:600;color:#f9d120;margin-bottom:4px}.message-system{justify-content:center;margin-bottom:12px}.message-system .message-content{background:transparent;color:#999;font-size:12px;font-style:italic;text-align:center;max-width:100%}.typing-indicator{display:flex;align-items:center;padding:8px 12px;margin-top:8px}.typing-dot{width:6px;height:6px;background:#999;border-radius:50%;margin-right:4px;animation:typingBounce 1.4s infinite}.typing-dot:nth-child(3){animation-delay:.4s;margin-right:8px}.typing-text{font-size:12px;color:#999;font-style:italic}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}.chat-input-area{padding:16px;background:white;border-top:1px solid #e0e0e0;width:100%;box-sizing:border-box}.chat-input-area form{display:flex;gap:8px}.chat-input-area textarea{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:20px;font-size:14px;resize:none;max-height:100px;font-family:inherit;transition:border-color .2s}.chat-input-area textarea:focus{outline:none;border-color:#f9d120}.send-btn{width:40px;height:40px;background:linear-gradient(135deg,#F9D120 0%,#e8c410 100%);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}.send-btn:hover{transform:scale(1.05);box-shadow:0 2px 8px #f9d12066}.send-btn svg{width:18px;height:18px;color:#333}.chat-messages::-webkit-scrollbar,.pre-chat-form::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track,.pre-chat-form::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb,.pre-chat-form::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover,.pre-chat-form::-webkit-scrollbar-thumb:hover{background:#999}@media (max-width: 768px){.chat-widget{bottom:0;left:0}.chat-bubble{width:40px;height:40px;bottom:16px;left:16px}.chat-bubble svg{width:20px;height:20px}.chat-window{width:100vw;height:100vh;max-height:100vh;bottom:0;left:0;border-radius:0}.chat-header{border-radius:0}.message-content{max-width:85%}}@media (min-width: 769px) and (max-width: 1024px){.chat-window{width:360px;height:550px}}.typing-indicator{display:flex;align-items:center;padding:10px;gap:5px}.typing-dot{width:8px;height:8px;background-color:#999;border-radius:50%;animation:wave 1.4s ease-in-out infinite}.typing-dot:nth-child(1){animation-delay:0s}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes wave{0%,60%,to{transform:translateY(0);opacity:.6}30%{transform:translateY(-10px);opacity:1}}.typing-text{margin-left:8px;font-size:12px;color:#666;font-style:italic}@media (prefers-reduced-motion: reduce){.chat-window,.message,.chat-bubble,.send-btn{animation:none;transition:none}}#chat-message-form{width:100%}.attach-file-btn{background:none;border:none;padding:8px;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.attach-file-btn:hover{color:#9d8f4f}.attach-file-btn svg{width:20px;height:20px}.chat-input-form{display:flex;align-items:flex-end;gap:8px;width:100%}.file-preview-area{padding:15px;background:#f8f9fa;border-top:1px solid #dee2e6}.file-preview-content{display:flex;flex-direction:column;gap:10px}.file-preview-container{display:flex;justify-content:center;align-items:center}.image-preview{text-align:center}.image-preview img{max-width:100%;max-height:200px;border-radius:4px;border:1px solid #dee2e6}.image-preview p{margin-top:8px;font-size:12px;color:#666}.file-preview{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.file-preview svg{color:#9d8f4f}.file-preview p{margin:0;font-size:12px;color:#666}.file-preview-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}.btn-cancel-file{padding:8px 16px;background:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background .2s ease}.btn-cancel-file:hover{background:#5a6268}.btn-send-file{padding:8px 16px;background:#9D8F4F;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background .2s ease}.btn-send-file:hover{background:#8a7d45}.message-attachment{margin-top:8px}.image-attachment{display:block;text-decoration:none}.image-attachment img{max-width:200px;max-height:150px;border-radius:4px;cursor:pointer;transition:opacity .2s ease}.image-attachment:hover img{opacity:.85}.attachment-name{margin:4px 0 0;font-size:11px;color:#666}.file-attachment{margin-top:8px}.file-download{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;text-decoration:none;color:#333;font-size:13px;transition:all .2s ease}.file-download:hover{background:#e9ecef;border-color:#9d8f4f}.file-download svg{width:24px;height:24px;flex-shrink:0}.file-size{font-size:11px;color:#999}.lightbox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.lightbox-image{max-width:90%;max-height:90%;object-fit:contain;border-radius:4px}.lightbox-close{position:absolute;top:20px;right:30px;background:rgba(255,255,255,.2);color:#fff;border:none;font-size:40px;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s ease}.lightbox-close:hover{background:rgba(255,255,255,.3)}@media (max-width: 480px){.image-attachment img{max-width:150px;max-height:120px}.lightbox-image{max-width:95%;max-height:95%}.lightbox-close{top:10px;right:15px;width:40px;height:40px;font-size:32px}}