#ngai-widget { position:fixed; bottom:20px; right:20px; z-index:999999; font-family:-apple-system,BlinkMacSystemFont,sans-serif; pointer-events:none; width:auto; height:auto; }
#ngai-widget > * { pointer-events:auto; }

#ngai-launcher { width:60px; height:60px; border-radius:50%; background:#00b5bd !important; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(0,181,189,0.4); display:flex; align-items:center; justify-content:center; transition:transform 0.3s,background 0.3s; position:relative; }
#ngai-launcher:hover { transform:scale(1.1); background:#00a0a8 !important; }
#ngai-launcher .icon-message,
#ngai-launcher .icon-close { width:26px; height:26px; position:absolute; transition:opacity 0.3s; }
#ngai-launcher .icon-message { opacity:1; }
#ngai-launcher .icon-close { opacity:0; }
#ngai-launcher.open .icon-message { opacity:0; }
#ngai-launcher.open .icon-close { opacity:1; }

#ngai-window { position:absolute; bottom:80px; right:0; width:380px; height:600px; background:white; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.2); display:none; flex-direction:column; overflow:hidden; }
#ngai-window.open { display:flex; }

.ngai-header { background:#000; color:white; padding:20px; display:flex; align-items:center; gap:15px; }
.ngai-agent-photo { width:50px; height:50px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid #00b5bd; }
.ngai-agent-photo img { width:100%; height:100%; object-fit:cover; }
.ngai-header-info { flex:1; }
.ngai-header-info h3 { margin:0 0 5px; font-size:16px; font-weight:600; }
.ngai-status { margin:0; font-size:13px; color:#4ade80; display:flex; align-items:center; gap:6px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#4ade80; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

#ngai-welcome { display:flex; flex-direction:column; height:100%; }
.ngai-welcome-content { padding:20px; }
#ngai-welcome input { width:100%; padding:12px; margin-bottom:10px; border:1px solid #ddd; border-radius:6px; font-size:14px; box-sizing:border-box; }
#ngai-welcome button { width:100%; padding:14px; background:#00b5bd; color:white; border:none; border-radius:6px; font-size:15px; font-weight:600; cursor:pointer; transition:background 0.2s; }
#ngai-welcome button:hover { background:#00a0a8; }
#ngai-welcome button:disabled { background:#ccc; cursor:not-allowed; }

#ngai-chat { display:none; flex-direction:column; height:100%; }
.ngai-chat-header { background:#000; color:white; padding:12px 15px; display:flex; align-items:center; gap:12px; }
.ngai-agent-photo-small { width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid #00b5bd; }
.ngai-agent-photo-small img { width:100%; height:100%; object-fit:cover; }
.ngai-chat-header .ngai-header-info { flex:1; }
.ngai-chat-header strong { display:block; font-size:14px; }
.ngai-status-small { font-size:12px; color:#4ade80; display:flex; align-items:center; gap:5px; }
.ngai-status-small .status-dot { width:6px; height:6px; }
#ngai-close { background:none; border:none; color:white; cursor:pointer; padding:0; margin:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background 0.2s; flex-shrink:0; }
#ngai-close:hover { background:rgba(255,255,255,0.2); }
#ngai-close svg { width:24px; height:24px; }

#ngai-messages { flex:1; overflow-y:auto; padding:15px; background:#f9f9f9; }
.ngai-message { margin-bottom:15px; display:flex; flex-direction:column; animation:slideIn 0.3s ease; }
@keyframes slideIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.ngai-message.customer { align-items:flex-end; }
.ngai-message.ai { align-items:flex-start; }
.bubble { padding:10px 14px; border-radius:12px; max-width:75%; word-wrap:break-word; line-height:1.4; }
.ngai-message.customer .bubble { background:#00b5bd; color:white; border-bottom-right-radius:4px; }
.ngai-message.ai .bubble { background:white; color:#333; border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,0.1); }
.bubble.typing { display:flex; gap:4px; padding:12px 16px; }
.bubble.typing span { width:8px; height:8px; border-radius:50%; background:#999; animation:bounce 1.4s infinite; }
.bubble.typing span:nth-child(2) { animation-delay:0.2s; }
.bubble.typing span:nth-child(3) { animation-delay:0.4s; }
@keyframes bounce { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-8px); } }

#ngai-rating { padding:15px; background:#f9f9f9; border-top:1px solid #eee; text-align:center; }
.rating-prompt { font-size:13px; color:#666; margin-bottom:10px; }
.rating-buttons { display:flex; justify-content:center; gap:15px; }
.rating-btn { background:white; border:2px solid #ddd; border-radius:50%; width:48px; height:48px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.rating-btn svg { width:24px; height:24px; color:#999; }
.rating-btn:hover { border-color:#00b5bd; transform:scale(1.1); }
.rating-btn:hover svg { color:#00b5bd; }
.rating-btn.selected { border-color:#00b5bd; background:#e6f7f7; }
.rating-btn.selected svg { color:#00b5bd; }

.ngai-actions { padding:10px 15px; background:white; border-top:1px solid #eee; }
.action-btn { width:100%; padding:10px; background:#f5f5f5; border:1px solid #ddd; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.2s; }
.action-btn:hover { background:#e8e8e8; border-color:#00b5bd; }
.action-btn svg { width:16px; height:16px; }

.ngai-input { padding:15px; border-top:1px solid #eee; display:flex; gap:10px; background:white; }
#ngai-text { flex:1; padding:10px 14px; border:1px solid #ddd; border-radius:20px; resize:none; font-family:inherit; font-size:14px; line-height:1.4; max-height:100px; }
#ngai-text:focus { outline:none; border-color:#00b5bd; }
#ngai-send { width:44px; height:44px; background:#00b5bd; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.2s,transform 0.2s; }
#ngai-send:hover { background:#00a0a8; transform:scale(1.05); }
#ngai-send:disabled { background:#ccc; cursor:not-allowed; transform:scale(1); }
#ngai-send svg { width:20px; height:20px; }

#ngai-call-modal { position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000000; display:flex; align-items:center; justify-content:center; }
.modal-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); }
.modal-content { position:relative; background:white; padding:30px; border-radius:12px; width:90%; max-width:400px; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.modal-content h3 { margin:0 0 10px; font-size:20px; }
.modal-content p { margin:0 0 20px; color:#666; }
.modal-content input { width:100%; padding:12px; border:1px solid #ddd; border-radius:6px; font-size:14px; box-sizing:border-box; margin-bottom:15px; }
.modal-buttons { display:flex; gap:10px; }
.button-primary { flex:1; padding:12px; background:#00b5bd; color:white; border:none; border-radius:6px; font-weight:600; cursor:pointer; }
.button-secondary { flex:1; padding:12px; background:#f5f5f5; border:1px solid #ddd; border-radius:6px; font-weight:600; cursor:pointer; }

@media (max-width:768px) {
    #ngai-widget { width:0; height:0; overflow:visible; bottom:0; right:0; }
    #ngai-launcher { position:fixed; bottom:20px; right:20px; }
    #ngai-window { position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100vh; height:100dvh; border-radius:0; max-height:none; }
}