#jdih-wa-ai{
position:fixed !important;
right:18px !important;
bottom:18px !important;
z-index:2147483647 !important; /* max z-index */
display:flex !important;
align-items:center;
gap:10px;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
}

/* Badge "AI" yang berkedip di pojok tombol */
.jdih-wa-badge{
position:absolute;
top:-4px;
right:-4px;
background:linear-gradient(135deg,#dc2626,#ef4444);
color:#fff;
font-size:10px;
font-weight:900;
letter-spacing:.5px;
padding:3px 7px;
border-radius:999px;
border:2px solid #fff;
box-shadow:0 4px 12px rgba(220,38,38,.45);
animation:badge-pop 2.4s infinite;
z-index:2;
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
}
@keyframes badge-pop{
0%,80%,100%{transform:scale(1);}
85%{transform:scale(1.15);}
90%{transform:scale(.95);}
95%{transform:scale(1.08);}
}

.jdih-wa-button{
width:92px;
height:92px;
border-radius:50%;
background:linear-gradient(135deg,#25D366,#128C7E);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 12px 38px rgba(37,211,102,.55),0 4px 12px rgba(0,0,0,.18);
transition:.3s;
animation:waFloat 2s infinite;
border:4px solid rgba(255,255,255,.35);
cursor:pointer;
}
.jdih-wa-button svg{
width:54px !important;
height:54px !important;
}

.jdih-wa-button:hover{
transform:scale(1.12);
box-shadow:0 12px 40px rgba(37,211,102,.65),0 4px 12px rgba(0,0,0,.2);
}

.jdih-wa-button img{
width:40px;
height:40px;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

.jdih-wa-tooltip{
background:#fff;
padding:10px 14px;
border-radius:14px;
font-size:13px;
font-weight:700;
box-shadow:0 10px 25px rgba(15,23,42,.12);
color:#0f172a;
white-space:nowrap;
}

@keyframes waFloat{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-5px);
}
100%{
transform:translateY(0px);
}
}

@media(max-width:768px){

#jdih-wa-ai{
right:14px;
bottom:14px;
}

.jdih-wa-button{
width:72px;
height:72px;
}
.jdih-wa-button svg{
width:42px !important;
height:42px !important;
}

.jdih-wa-tooltip{
display:none;
}

}


/* AI CHATBOX */

.jdih-ai-chatbox{
position:fixed;
right:20px;
bottom:95px;
width:360px;
max-width:92%;
background:#fff;
border-radius:24px;
box-shadow:0 30px 70px rgba(15,23,42,.18);
overflow:hidden;
z-index:99999999;
display:none;
flex-direction:column;
}

.jdih-ai-chatbox.active{
display:flex;
}

.jdih-ai-header{
background:#22c55e;
color:#fff;
padding:18px 56px 18px 18px;
font-size:18px;
font-weight:800;
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
}

.jdih-ai-messages{
padding:18px;
height:360px;
overflow-y:auto;
background:#f8fafc;
display:flex;
flex-direction:column;
gap:14px;
}

.jdih-ai-bot{
background:#fff;
padding:14px;
border-radius:18px;
font-size:14px;
line-height:1.7;
box-shadow:0 6px 18px rgba(15,23,42,.06);
}

.jdih-ai-user{
background:#2563eb;
color:#fff;
padding:14px;
border-radius:18px;
font-size:14px;
align-self:flex-end;
max-width:85%;
}

.jdih-ai-result{
margin-top:12px;
padding-top:12px;
border-top:1px solid #e2e8f0;
}

.jdih-ai-result a{
display:inline-block;
margin-top:8px;
font-weight:700;
text-decoration:none;
color:#16a34a;
}

.jdih-ai-input-wrap{
display:flex;
padding:14px;
gap:10px;
border-top:1px solid #e2e8f0;
}

.jdih-ai-input{
flex:1;
border:1px solid #cbd5e1;
border-radius:14px;
padding:12px;
font-size:14px;
outline:none;
}

.jdih-ai-send{
border:none;
background:#22c55e;
color:#fff;
padding:0 20px;
border-radius:14px;
font-weight:700;
cursor:pointer;
}

@media(max-width:768px){

.jdih-ai-chatbox{
right:14px;
bottom:82px;
width:92%;
}

}

/* === UPGRADE: Card Result, Quick Chips, Loading, Autocomplete === */

.jdih-ai-close{
position:absolute;
top:50%; right:14px;
transform:translateY(-50%);
width:32px; height:32px;
background:rgba(255,255,255,.2);
border:none;
border-radius:50%;
color:#fff;
font-size:22px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
padding:0;
font-weight:700;
}
.jdih-ai-close:hover{
background:rgba(255,255,255,.35);
transform:translateY(-50%) scale(1.1);
}
.jdih-ai-close:active{
transform:translateY(-50%) scale(.95);
}

.jdih-ai-loading{
display:inline-block;
font-style:italic; color:#6b7280; font-size:13px;
}
.jdih-ai-loading::after{
content:''; display:inline-block; width:6px; height:6px;
border-radius:50%; background:#dc2626; margin-left:6px;
animation:jdih-ai-pulse 1s infinite;
}
@keyframes jdih-ai-pulse{
0%,100%{ opacity:.3; transform:scale(.8); }
50%{ opacity:1; transform:scale(1.2); }
}

.jdih-ai-answer{
margin-bottom:10px; line-height:1.55;
}

.jdih-ai-cards{
display:flex; flex-direction:column; gap:8px;
margin-top:8px;
}
.jdih-ai-card{
border:1px solid #e5e7eb; border-left:4px solid #dc2626;
border-radius:8px; padding:10px 12px; background:#fff;
}
.jdih-ai-card-title{
font-weight:700; font-size:13px; color:#1f2937;
line-height:1.4; margin-bottom:6px;
}
.jdih-ai-card-meta{
display:flex; flex-wrap:wrap; gap:8px;
font-size:11px; color:#6b7280; margin-bottom:6px;
}
.jdih-ai-tag{
background:#fee2e2; color:#991b1b;
padding:2px 8px; border-radius:10px;
font-weight:700; font-size:10px;
}
.jdih-ai-status{
background:#dcfce7; color:#14532d;
padding:2px 8px; border-radius:10px; font-weight:600;
}
.jdih-ai-card-abstract{
font-size:11px; color:#4b5563; line-height:1.5;
background:#f9fafb; padding:6px 8px;
border-radius:5px; margin-bottom:6px;
}
.jdih-ai-card-actions{
display:flex; gap:6px; flex-wrap:wrap;
}
.jdih-ai-btn-detail,
.jdih-ai-btn-download{
font-size:11px; font-weight:700;
padding:5px 10px; border-radius:6px;
text-decoration:none; display:inline-block;
}
.jdih-ai-btn-detail{
background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe;
}
.jdih-ai-btn-detail:hover{ background:#dbeafe; }
.jdih-ai-btn-download{
background:#dc2626; color:#fff;
}
.jdih-ai-btn-download:hover{ background:#991b1b; }

.jdih-ai-more{
font-size:11px; color:#92400e; background:#fef3c7;
padding:6px 10px; border-radius:6px; margin-top:8px;
}
.jdih-ai-katlinks{
font-size:11px; margin-top:10px; padding-top:8px;
border-top:1px dashed #e5e7eb; color:#6b7280;
}
.jdih-ai-katlinks a{
display:inline-block; padding:3px 8px; margin:2px;
background:#1e3a8a; color:#fff; border-radius:6px;
text-decoration:none; font-weight:600; font-size:10px;
}
.jdih-ai-katlinks a:hover{ background:#1e40af; }

/* === NAVBAR AUTOCOMPLETE === */
.navbar-autocomplete{
position:absolute; top:calc(100% + 4px); left:0; right:0;
background:#fff; border:1px solid #e5e7eb;
border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.15);
max-height:420px; overflow-y:auto; z-index:99999;
display:none;
}
.navbar-autocomplete.active{ display:block; }
.navbar-autocomplete .ac-item{
display:block; padding:10px 14px;
border-bottom:1px solid #f3f4f6;
text-decoration:none; color:#1f2937;
transition:.15s;
}
.navbar-autocomplete .ac-item:last-child{ border-bottom:none; }
.navbar-autocomplete .ac-item:hover,
.navbar-autocomplete .ac-item.active{
background:#fef2f2;
}
.navbar-autocomplete .ac-title{
font-weight:600; font-size:13px; line-height:1.4;
margin-bottom:3px;
}
.navbar-autocomplete .ac-meta{
display:flex; gap:8px; font-size:11px; color:#6b7280;
}
.navbar-autocomplete .ac-tag{
background:#fee2e2; color:#991b1b;
padding:1px 7px; border-radius:8px;
font-weight:700; font-size:10px;
}
.navbar-autocomplete .ac-empty{
padding:14px; text-align:center; color:#9ca3af; font-style:italic;
}

/* === KONTAK PETUGAS via WHATSAPP (not-found / error) === */
.jdih-ai-contact{
margin-top:14px;
padding:16px;
background:linear-gradient(135deg,#f0fdf4,#dcfce7);
border:1px solid #86efac;
border-radius:12px;
text-align:center;
}
.jdih-ai-contact-title{
font-weight:800;
color:#14532d;
font-size:13px;
margin-bottom:6px;
}
.jdih-ai-contact-text{
font-size:12px;
color:#166534;
margin-bottom:12px;
line-height:1.5;
}
.jdih-ai-btn-wa{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff !important;
padding:12px 20px;
border-radius:12px;
text-decoration:none;
font-weight:800;
font-size:13px;
box-shadow:0 6px 16px rgba(37,211,102,.35);
transition:.25s;
}
.jdih-ai-btn-wa:hover{
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(37,211,102,.5);
color:#fff !important;
}
.jdih-ai-btn-wa .wa-icon{
font-size:20px;
}
.jdih-ai-btn-wa .wa-number{
font-size:14px;
font-weight:900;
letter-spacing:.5px;
background:rgba(255,255,255,.2);
padding:3px 10px;
border-radius:6px;
margin-top:2px;
}

/* ============================================================
   UPGRADE 2025 — Header Avatar, Voice Input, Examples, Tip
   ============================================================ */

/* Override header lama */
.jdih-ai-header{
background:linear-gradient(135deg,#16a34a 0%,#22c55e 50%,#16a34a 100%) !important;
display:flex !important;
align-items:center;
justify-content:space-between;
padding:14px 18px 14px 14px !important;
position:relative;
}

.jdih-ai-header-left{
display:flex;
align-items:center;
gap:11px;
}
.jdih-ai-header-avatar{
width:42px; height:42px;
border-radius:50%;
background:rgba(255,255,255,.2);
border:2px solid rgba(255,255,255,.35);
display:flex; align-items:center; justify-content:center;
font-size:22px;
backdrop-filter:blur(8px);
flex-shrink:0;
}
.jdih-ai-header-title{
font-size:15px;
font-weight:800;
color:#fff;
line-height:1.1;
}
.jdih-ai-header-status{
font-size:11px;
color:rgba(255,255,255,.9);
font-weight:500;
display:flex;
align-items:center;
gap:6px;
margin-top:3px;
}
.jdih-ai-header-status .status-dot{
width:7px; height:7px;
border-radius:50%;
background:#86efac;
box-shadow:0 0 8px #86efac;
animation:status-pulse 1.5s infinite;
}
@keyframes status-pulse{
0%,100%{opacity:.6;}
50%{opacity:1;}
}

/* === Examples (di greeting) === */
.jdih-ai-examples{
display:flex;
flex-wrap:wrap;
gap:6px;
margin:10px 0 0;
}
.jdih-ai-examples span{
background:#f0fdf4;
border:1px solid #bbf7d0;
color:#166534;
padding:5px 11px;
border-radius:999px;
font-size:11px;
font-weight:600;
}

.jdih-ai-tip{
font-size:11px;
color:#6b7280;
margin-top:10px;
padding:6px 10px;
background:#fef9c3;
border-radius:8px;
border-left:3px solid #fbbf24;
}

/* === Input wrap with voice button === */
.jdih-ai-input-wrap{
display:flex;
align-items:center;
gap:8px;
padding:12px 14px;
background:#fff;
border-top:1px solid #f1f5f9;
}
.jdih-ai-voice{
width:42px; height:42px;
border:none;
background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
color:#4b5563;
border-radius:50%;
cursor:pointer;
font-size:18px;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
transition:.2s;
}
.jdih-ai-voice:hover{
background:linear-gradient(135deg,#fecaca,#fca5a5);
color:#dc2626;
transform:scale(1.05);
}
.jdih-ai-voice.listening{
background:linear-gradient(135deg,#dc2626,#ef4444) !important;
color:#fff !important;
animation:voice-pulse .8s infinite;
}
@keyframes voice-pulse{
0%,100%{
box-shadow:0 0 0 0 rgba(220,38,38,.6);
}
50%{
box-shadow:0 0 0 8px rgba(220,38,38,0);
}
}

/* Tombol send dengan icon SVG */
.jdih-ai-send{
width:42px !important;
height:42px !important;
padding:0 !important;
border-radius:50% !important;
background:linear-gradient(135deg,#dc2626,#ef4444) !important;
color:#fff !important;
border:none !important;
cursor:pointer;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex-shrink:0;
transition:.2s;
font-weight:700;
}
.jdih-ai-send:hover{
transform:scale(1.05);
box-shadow:0 6px 16px rgba(220,38,38,.4);
}
.jdih-ai-send svg{
transform:translateX(1px);
}

.jdih-ai-input{
flex:1 !important;
border:1px solid #e5e7eb !important;
border-radius:999px !important;
padding:11px 16px !important;
font-size:14px !important;
outline:none;
transition:.2s;
background:#f9fafb;
}
.jdih-ai-input:focus{
border-color:#22c55e !important;
background:#fff;
box-shadow:0 0 0 3px rgba(34,197,94,.1);
}

/* Override tooltip */
.jdih-wa-tooltip{
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:12px;
font-weight:700;
}

/* Mobile adjustments */
@media (max-width: 480px){
    .jdih-ai-header-avatar{ width:36px; height:36px; font-size:18px; }
    .jdih-ai-header-title{ font-size:13px; }
    .jdih-ai-header-status{ font-size:10px; }
    .jdih-ai-voice,
    .jdih-ai-send{ width:38px !important; height:38px !important; }
    .jdih-ai-examples span{ font-size:10px; padding:4px 9px; }
}