#nigchat-widget{position:fixed;right:18px;bottom:18px;z-index:999999;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;}
#nigchat-toggle{display:flex;align-items:center;gap:10px;border:none;border-radius:999px;padding:12px 14px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.16);background:#111827;color:#fff;position:relative}
#nigchat-toggle .nigchat-dot{width:10px;height:10px;border-radius:999px;background:#22c55e;display:inline-block}
#nigchat-panel{width:340px;max-width:calc(100vw - 36px);height:520px;max-height:calc(100vh - 110px);background:#fff;border-radius:18px;box-shadow:0 18px 55px rgba(0,0,0,.22);overflow:hidden;display:none;margin-bottom:10px}
.nigchat-open #nigchat-panel{display:block}
.nigchat-header{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 14px 10px;background:#0b1220;color:#fff}
.nigchat-title{font-weight:700}
.nigchat-sub{font-size:12px;opacity:.8;margin-top:2px}
#nigchat-close{border:none;background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 6px}
.nigchat-messages{padding:12px;height:340px;overflow:auto;background:#f7f7fb}
.nigchat-form,.nigchat-preform{padding:12px;border-top:1px solid #eee;background:#fff}
.nigchat-preform input{width:100%;margin-bottom:8px;border:1px solid #e5e7eb;border-radius:12px;padding:10px}
#nigchat-start{width:100%;border:none;border-radius:12px;padding:10px;background:#111827;color:#fff;cursor:pointer}
.nigchat-small{font-size:11px;opacity:.65;margin-top:8px}
#nigchat-text{width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:10px;resize:none}
#nigchat-send{margin-top:8px;width:100%;border:none;border-radius:12px;padding:10px;background:#111827;color:#fff;cursor:pointer}
.nigchat-bubble{margin:8px 0;display:flex;gap:10px}
.nigchat-bubble.admin{justify-content:flex-end}
.nigchat-bubble .box{max-width:78%;border:1px solid #e5e7eb;border-radius:14px;padding:10px;background:#fff}
.nigchat-bubble.admin .box{background:#e9f1ff}
.nigchat-bubble .meta{font-size:11px;opacity:.65;margin-bottom:6px}
.nigchat-bubble .nigchat-avatar{
width:26px;
height:26px;
border-radius:999px;
flex:0 0 26px;
background:#e5e7eb;
align-self:flex-start;
}
.nigchat-bubble.admin .nigchat-avatar{
background:#111827;
}
.nigchat-theme-tema-2 .nigchat-bubble.admin .nigchat-avatar{
background:#2563eb;
}
.nigchat-theme-tema-3 .nigchat-bubble.admin .nigchat-avatar{
background:#f4511e;
}
.nigchat-theme-tema-4 .nigchat-bubble.admin .nigchat-avatar{
background:#16a34a;
}
.nigchat-typing{
font-size:11px;
color:#6b7280;
padding:0 12px 6px 12px;
font-style:italic;
} .nigchat-offline-actions{
padding: 10px 12px;
border-top: 1px solid rgba(0,0,0,.08);
display:flex;
gap:10px;
align-items:center;
justify-content:space-between;
}
.nigchat-offline-actions .nigchat-wa,
.nigchat-offline-actions .nigchat-offline-btn{
flex:1;
text-align:center;
padding:10px 12px;
border-radius:10px;
font-weight:600;
cursor:pointer;
border:1px solid rgba(0,0,0,.12);
background:#fff;
color:#111827;
text-decoration:none;
}
.nigchat-offline-actions .nigchat-wa:hover,
.nigchat-offline-actions .nigchat-offline-btn:hover{
filter:brightness(.98);
} .nigchat-modal{ position:fixed; inset:0; z-index:999999; display:none; }
.nigchat-modal .nigchat-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.nigchat-modal .nigchat-modal-card{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:min(520px, calc(100% - 24px));
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.nigchat-modal-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 14px;
border-bottom:1px solid rgba(0,0,0,.08);
}
.nigchat-modal-title{ font-weight:700; }
.nigchat-modal-close{
width:32px; height:32px;
border-radius:10px;
border:1px solid rgba(0,0,0,.12);
background:#fff;
cursor:pointer;
font-size:18px;
line-height:1;
}
#nigchat-offline-form{ padding:14px; display:flex; flex-direction:column; gap:10px; }
#nigchat-offline-form input,
#nigchat-offline-form textarea{
width:100%;
border:1px solid rgba(0,0,0,.12);
border-radius:10px;
padding:10px 12px;
font:inherit;
}
#nigchat-offline-form textarea{ resize:vertical; }
.nigchat-modal-submit{
padding:10px 12px;
border-radius:10px;
border:0;
cursor:pointer;
font-weight:700;
} .nigchat-open #nigchat-panel{ display:flex !important; }
#nigchat-panel{ flex-direction:column !important; } #nigchat-panel .nigchat-messages{
flex:1 1 auto !important;
height:auto !important;
min-height:0 !important;
} #nigchat-panel .nigchat-preform,
#nigchat-panel .nigchat-form,
#nigchat-panel .nigchat-offline-actions{
flex:0 0 auto !important;
} @media (max-height: 720px){
#nigchat-panel{ height:480px; }
#nigchat-panel .nigchat-messages{ padding:10px; }
#nigchat-panel .nigchat-preform,
#nigchat-panel .nigchat-form{ padding:10px; }
} #nigchat-toggle.nigchat-unread::after{
content:'';
position:absolute;
top:-4px;
right:-4px;
width:12px;
height:12px;
border-radius:999px;
background:#ef4444;
box-shadow:0 0 0 2px #ffffff;
} #nigchat-toggle.nigchat-online .nigchat-dot{
position:relative;
}
#nigchat-toggle.nigchat-online .nigchat-dot::after{
content:'';
position:absolute;
left:50%;
top:50%;
width:10px;
height:10px;
margin-left:-5px;
margin-top:-5px;
border-radius:999px;
background:rgba(34,197,94,0.35);
animation:nigchat-pulse 1.1s infinite;
}
@keyframes nigchat-pulse{
0%{ transform:scale(1); opacity:.8; }
70%{ transform:scale(2.2); opacity:0; }
100%{ transform:scale(2.2); opacity:0; }
} #nigchat-toast{
display:none;
position:absolute;
right:0;
bottom:62px;
max-width:260px;
background:#111827;
color:#fff;
font-size:13px;
padding:10px 12px;
border-radius:12px;
box-shadow:0 10px 24px rgba(0,0,0,.25);
pointer-events:none;
}
#nigchat-toast.nigchat-toast-show{
display:block;
animation:nigchat-toast-blink 1.2s infinite;
}
@keyframes nigchat-toast-blink{
0%, 100% { opacity:1; transform:translateY(0); }
50% { opacity:.25; transform:translateY(-1px); }
} .nigchat-upload{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:12px;gap:6px;}
.nigchat-upload-label{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;cursor:pointer;white-space:nowrap;}
.nigchat-upload-hint{opacity:.6;font-size:11px;} .nigchat-theme-tema-1 #nigchat-toggle{background:#111827;}
.nigchat-theme-tema-1 .nigchat-header{background:#0b1220;}
.nigchat-theme-tema-2 #nigchat-toggle{background:#1d4ed8;}
.nigchat-theme-tema-2 .nigchat-header{background:#1e40af;}
.nigchat-theme-tema-3 #nigchat-toggle{background:#f4511e;}
.nigchat-theme-tema-3 .nigchat-header{background:#f4511e;}
.nigchat-theme-tema-4 #nigchat-toggle{background:#15803d;}
.nigchat-theme-tema-4 .nigchat-header{background:#166534;} .nigchat-theme-tema-1 #nigchat-send,
.nigchat-theme-tema-1 #nigchat-start,
.nigchat-theme-tema-1 .nigchat-modal-submit,
.nigchat-theme-tema-1 .nigchat-offline-actions .nigchat-wa,
.nigchat-theme-tema-1 .nigchat-offline-actions .nigchat-offline-btn{
background:#111827;
color:#fff;
border-color:#0b1220;
}
.nigchat-theme-tema-2 #nigchat-send,
.nigchat-theme-tema-2 #nigchat-start,
.nigchat-theme-tema-2 .nigchat-modal-submit,
.nigchat-theme-tema-2 .nigchat-offline-actions .nigchat-wa,
.nigchat-theme-tema-2 .nigchat-offline-actions .nigchat-offline-btn{
background:#1d4ed8;
color:#fff;
border-color:#1e40af;
}
.nigchat-theme-tema-3 #nigchat-send,
.nigchat-theme-tema-3 #nigchat-start,
.nigchat-theme-tema-3 .nigchat-modal-submit,
.nigchat-theme-tema-3 .nigchat-offline-actions .nigchat-wa,
.nigchat-theme-tema-3 .nigchat-offline-actions .nigchat-offline-btn{
background:#f4511e;
color:#fff;
border-color:#f4511e;
}
.nigchat-theme-tema-4 #nigchat-send,
.nigchat-theme-tema-4 #nigchat-start,
.nigchat-theme-tema-4 .nigchat-modal-submit,
.nigchat-theme-tema-4 .nigchat-offline-actions .nigchat-wa,
.nigchat-theme-tema-4 .nigchat-offline-actions .nigchat-offline-btn{
background:#15803d;
color:#fff;
border-color:#166534;
} .nigchat-theme-tema-1 #nigchat-text,
.nigchat-theme-tema-1 .nigchat-preform input{
border-color:rgba(15,23,42,.35);
}
.nigchat-theme-tema-2 #nigchat-text,
.nigchat-theme-tema-2 .nigchat-preform input{
border-color:rgba(37,99,235,.4);
}
.nigchat-theme-tema-3 #nigchat-text,
.nigchat-theme-tema-3 .nigchat-preform input{
border-color: rgba(244,81,30,0.45);
}
.nigchat-theme-tema-4 #nigchat-text,
.nigchat-theme-tema-4 .nigchat-preform input{
border-color:rgba(22,163,74,.45);
}
.nigchat-theme-tema-1 #nigchat-text:focus,
.nigchat-theme-tema-1 .nigchat-preform input:focus,
.nigchat-theme-tema-2 #nigchat-text:focus,
.nigchat-theme-tema-2 .nigchat-preform input:focus,
.nigchat-theme-tema-3 #nigchat-text:focus,
.nigchat-theme-tema-3 .nigchat-preform input:focus,
.nigchat-theme-tema-4 #nigchat-text:focus,
.nigchat-theme-tema-4 .nigchat-preform input:focus{
outline:none;
box-shadow:0 0 0 1px rgba(15,23,42,.1);
} .nigchat-offline-actions .nigchat-wa,
.nigchat-offline-actions .nigchat-offline-btn{
font-weight:600;
} .nigchat-rating{
padding:10px 12px 12px 12px;
border-top:1px solid #e5e7eb;
background:#f9fafb;
margin-top:4px;
}
.nigchat-rating-inner{
display:flex;
flex-direction:column;
gap:6px;
}
.nigchat-rating-title{
font-size:12px;
font-weight:500;
color:#374151;
}
.nigchat-rating-stars{
display:flex;
gap:6px;
}
.nigchat-rating-stars button{
border:none;
background:transparent;
cursor:pointer;
font-size:18px;
line-height:1;
padding:0 2px;
color:#d1d5db;
}
.nigchat-rating-stars button.nigchat-star-active{
color:#fbbf24;
}
#nigchat-rating-note{
width:100%;
min-height:46px;
border-radius:8px;
border:1px solid #e5e7eb;
padding:6px 8px;
font-size:12px;
resize:vertical;
}
.nigchat-rating-actions{
display:flex;
justify-content:flex-end;
gap:8px;
}
.nigchat-rating-skip{
border-radius:999px;
border:1px solid #e5e7eb;
padding:4px 10px;
font-size:11px;
background:#fff;
cursor:pointer;
}
.nigchat-rating-send{
border-radius:999px;
border:none;
padding:4px 14px;
font-size:11px;
cursor:pointer;
background:#2563eb;
color:#fff;
}
.nigchat-theme-tema-2 .nigchat-rating-send{
background:#2563eb;
}
.nigchat-theme-tema-3 .nigchat-rating-send{
background:#f4511e;
}
.nigchat-theme-tema-4 .nigchat-rating-send{
background:#16a34a;
} .nigchat-rating-trigger{
margin-left:6px;
border:none;
background:transparent;
cursor:pointer;
font-size:16px;
line-height:1;
padding:0 4px;
color:#d1d5db;
}
.nigchat-rating-trigger:hover{
color:#fbbf24;
}