/* MSG ANIMATIONS */
@keyframes jepangMsgIn { from{opacity:0;transform:translateY(8px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
/* TYPING DOTS */
@keyframes etdotBounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }
.etdot { display:inline-block;width:6px;height:6px;background:#e11d2a;border-radius:50%;animation:etdotBounce .9s infinite; }
/* NOTIF DOT PULSE */
@keyframes notifPulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,0.5)} 50%{transform:scale(1.15);box-shadow:0 0 0 5px rgba(239,68,68,0)} }
#floatChatBtn > div { animation:notifPulse 1.8s infinite !important; }
/* CARD HOVER */
.card { transition:box-shadow .3s; }
.card:hover { box-shadow:0 20px 70px rgba(0,0,0,.9),0 0 0 1px rgba(225, 29, 42,0.1),inset 0 1px 0 rgba(255,255,255,0.04); }
/* QA BTN ACTIVE */
.qa-btn { position:relative;overflow:hidden; }
.qa-btn:active { transform:scale(0.96); }
/* TICKER SHIMMER */
.ticker-hl { animation:tkShimmer 2.5s infinite; }
@keyframes tkShimmer { 0%,100%{color:var(--yellow)} 50%{color:#fff;text-shadow:0 0 8px rgba(250,204,21,0.9)} }
/* FLOAT BTN */
#floatChatBtn { transition:transform .2s !important; }
#floatChatBtn:active { transform:scale(0.9) !important; }
/* SCROLLBAR */
#chatMessages::-webkit-scrollbar{width:3px}
#chatMessages::-webkit-scrollbar-track{background:transparent}
#chatMessages::-webkit-scrollbar-thumb{background:rgba(225, 29, 42,0.35);border-radius:10px}
/* ATTACH LABEL HOVER */
#attachLabel:hover { background:rgba(225, 29, 42,0.22) !important; }
/* CHAT INPUT */
#chatInputText { transition:border-color .2s,box-shadow .2s; }
#chatInputText:focus { border-color:#e11d2a !important; box-shadow:0 0 0 3px rgba(225, 29, 42,0.15) !important; }

/* ═══════════════════════════════════════
   INTERACTIVE ENHANCEMENTS — JepangQQ++
   ═══════════════════════════════════════ */

/* ── RIPPLE EFFECT ── */
.ripple-wrap { position:relative; overflow:hidden; }
.ripple-circle {
    position:absolute; border-radius:50%;
    background:rgba(225, 29, 42,0.35);
    transform:scale(0); animation:rippleAnim .6s linear;
    pointer-events:none;
}
@keyframes rippleAnim { to { transform:scale(4); opacity:0; } }

/* ── SHAKE ON ERROR ── */
@keyframes shakeAnim {
    0%,100%{transform:translateX(0)}
    15%{transform:translateX(-7px)}
    30%{transform:translateX(7px)}
    45%{transform:translateX(-5px)}
    60%{transform:translateX(5px)}
    75%{transform:translateX(-3px)}
    90%{transform:translateX(3px)}
}
.shake { animation:shakeAnim .5s ease; }

/* ── TOAST NOTIFICATION ── */
#jepangToast {
    position:fixed; top:70px; left:50%; transform:translateX(-50%) translateY(-20px);
    z-index:9999; min-width:200px; max-width:90vw;
    background:#1a2a1a; border:1px solid rgba(225, 29, 42,0.4);
    border-radius:12px; padding:10px 18px;
    display:flex; align-items:center; gap:10px;
    box-shadow:0 8px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(225, 29, 42,0.1);
    opacity:0; pointer-events:none;
    transition:all .35s cubic-bezier(.22,1,.36,1);
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:13px; font-weight:600; color:#e0e0e0;
}
#jepangToast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:all; }
/* ── TOAST DIMATIKAN total (pengaman: gak akan pernah tampil) ── */
#jepangToast { display:none !important; }
#jepangToast.toast-success { border-color:rgba(225, 29, 42,0.5); background:#0d1f0d; }
#jepangToast.toast-error { border-color:rgba(239,68,68,0.5); background:#1f0d0d; }
#jepangToast.toast-info { border-color:rgba(96,165,250,0.4); background:#0d1020; }
.toast-icon { font-size:18px; flex-shrink:0; }
.toast-bar {
    position:absolute; bottom:0; left:0; height:2px;
    background:var(--green); border-radius:0 0 12px 12px;
    animation:toastBar 3s linear forwards;
}
@keyframes toastBar { from{width:100%} to{width:0%} }

/* ── CONFETTI PARTICLES ── */
.confetti-wrap {
    position:fixed; inset:0; pointer-events:none; z-index:9998; overflow:hidden;
}
.confetti-p {
    position:absolute; width:8px; height:8px; border-radius:2px;
    animation:confettiFall linear forwards;
}
@keyframes confettiFall {
    0%   { transform:translateY(-20px) rotate(0deg); opacity:1; }
    100% { transform:translateY(100vh) rotate(720deg); opacity:0; }
}

/* ── QR GLOW SCAN LINE ── */
.qr-scan-overlay {
    position:absolute; top:14px; left:14px; right:14px; bottom:14px;
    border-radius:8px; overflow:hidden; pointer-events:none; z-index:2;
}
.qr-scan-line {
    position:absolute; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,rgba(225, 29, 42,0.9),transparent);
    box-shadow:0 0 10px rgba(225, 29, 42,0.7);
    animation:qrScanMove 2s ease-in-out infinite;
}
@keyframes qrScanMove {
    0%   { top:0%; opacity:0; }
    10%  { opacity:1; }
    90%  { opacity:1; }
    100% { top:100%; opacity:0; }
}

/* ── PAYMENT PROGRESS BAR ── */
#paymentProgressWrap {
    width:100%; height:4px; background:rgba(225, 29, 42,0.1);
    border-radius:10px; overflow:hidden; margin:8px 0;
}
#paymentProgressBar {
    height:100%; width:0%;
    background:linear-gradient(90deg,#e11d2a,#ff3b4e);
    border-radius:10px;
    box-shadow:0 0 8px rgba(225, 29, 42,0.5);
    transition:width .4s ease;
    animation:progressPulse 1.5s ease-in-out infinite;
}
@keyframes progressPulse {
    0%,100%{opacity:1} 50%{opacity:.7}
}

/* ── NOMINAL COUNTER ANIMATE ── */
.nom-value { transition:transform .15s; }
.nom-value.bump { transform:scale(1.08); }

/* ── INPUT FLOATING LABEL ── */
.input-group { position:relative; }
input:focus + .input-floating-hint { opacity:1; transform:translateY(0); }
.input-floating-hint {
    position:absolute; right:14px; top:50%; transform:translateY(-50%) translateY(5px);
    font-size:10px; color:var(--green); font-weight:700;
    opacity:0; transition:all .2s; pointer-events:none;
}

/* ── QA BTN RIPPLE & BOUNCE ── */
.qa-btn { position:relative; overflow:hidden; }
.qa-btn.bounce { animation:btnBounce .3s ease; }
@keyframes btnBounce { 0%,100%{transform:scale(1)} 40%{transform:scale(0.88)} 70%{transform:scale(1.06)} }

/* ── STEP DOT ANIMATE ── */
.step-dot { transition:all .4s cubic-bezier(.34,1.56,.64,1) !important; }

/* ── CARD ENTRY ANIMATE ── */
@keyframes cardSlideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.card { animation:cardSlideUp .5s cubic-bezier(.22,1,.36,1); }

/* ── STATUS BOX DETECTED PULSE ── */
@keyframes detectedPulse {
    0%,100%{box-shadow:0 0 0 0 rgba(225, 29, 42,0.4)}
    50%{box-shadow:0 0 0 8px rgba(225, 29, 42,0)}
}
.status-detected { animation:detectedPulse 1.5s ease infinite; }

/* ── QR FRAME GLOW APPEAR ── */
@keyframes qrAppear { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
.qr-frame { animation:qrAppear .5s cubic-bezier(.34,1.56,.64,1); }

/* ── FLOATING PARTICLES BG ── */
#particleBg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-particle {
    position:absolute; width:2px; height:2px; border-radius:50%;
    background:rgba(225, 29, 42,0.6);
    box-shadow:0 0 4px rgba(225, 29, 42,0.4);
    animation:bgParticleFloat linear infinite;
}
@keyframes bgParticleFloat {
    0%   { transform:translateY(100vh) translateX(0); opacity:0; }
    10%  { opacity:1; }
    90%  { opacity:.5; }
    100% { transform:translateY(-20px) translateX(20px); opacity:0; }
}

/* ── GENERATE BTN LOADING STATE ── */
.btn-generating {
    background:linear-gradient(135deg,#4a1a1f,#3a0f14) !important;
    pointer-events:none;
}
.btn-generating .btn-gen-dots {
    display:inline-flex; gap:4px; align-items:center;
}
.btn-gen-dot {
    width:5px; height:5px; border-radius:50%; background:#e11d2a;
    animation:etdotBounce .9s infinite;
}
.btn-gen-dot:nth-child(2){animation-delay:.2s}
.btn-gen-dot:nth-child(3){animation-delay:.4s}

/* ── NOMINAL PREVIEW POP ── */
@keyframes previewPop { 0%{transform:scale(0.85);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
.preview-nominal.show { animation:previewPop .3s ease forwards; }

/* ── TIMER WARNING ── */
@keyframes timerBlink { 0%,100%{opacity:1} 50%{opacity:.4} }
.timer-critical { animation:timerBlink .5s infinite !important; color:#ef4444 !important; }

/* ── SUCCESS CHECKMARK ── */
@keyframes checkDraw { from{stroke-dashoffset:100} to{stroke-dashoffset:0} }
.success-check { stroke-dasharray:100; stroke-dashoffset:100; animation:checkDraw .6s ease forwards; }

/* ── BRAND LOGO TYPEWRITER ── */
@keyframes brandGlow { 0%,100%{text-shadow:0 0 40px rgba(225, 29, 42,0.2)} 50%{text-shadow:0 0 60px rgba(225, 29, 42,0.5),0 0 100px rgba(225, 29, 42,0.2)} }
.brand-logo { animation:brandGlow 3s ease infinite; }