/* Social Proof Ninja - Frontend Styles */

#spn-root {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
}
#spn-root.spn-pos-bottom-left  { bottom: 24px; left: 24px; }
#spn-root.spn-pos-bottom-right { bottom: 24px; right: 24px; }
#spn-root.spn-pos-top-left     { top: 80px;   left: 24px; }
#spn-root.spn-pos-top-right    { top: 80px;   right: 24px; }

.spn-notif {
    pointer-events: all;
    max-width: 320px;
    min-width: 260px;
    cursor: pointer;
    user-select: none;
    will-change: transform, opacity;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── CLOSE BUTTON ─────────────────────── */
.spn-close {
    position: absolute;
    top: 8px; right: 10px;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.4;
    line-height: 1;
    padding: 2px 4px;
    color: inherit;
}
.spn-close:hover { opacity: 0.8; }

/* ── ANIMATIONS ───────────────────────── */
@keyframes spn-slide-in {
    from { transform: translateX(-120%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes spn-slide-in-right {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes spn-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes spn-bounce-in {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.05); }
    80%  { transform: scale(0.97); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes spn-flip-in {
    from { transform: rotateX(-90deg); opacity: 0; }
    to   { transform: rotateX(0deg);   opacity: 1; }
}
@keyframes spn-progress {
    from { width: 100%; }
    to   { width: 0%; }
}

.spn-anim-slide      { animation: spn-slide-in       0.4s cubic-bezier(.22,.68,0,1.2) forwards; }
.spn-anim-slide-right{ animation: spn-slide-in-right 0.4s cubic-bezier(.22,.68,0,1.2) forwards; }
.spn-anim-fade       { animation: spn-fade-in        0.4s ease forwards; }
.spn-anim-bounce     { animation: spn-bounce-in      0.5s ease forwards; }
.spn-anim-flip       { animation: spn-flip-in        0.4s ease forwards; perspective: 600px; }

.spn-exit { animation: spn-fade-in 0.3s ease reverse forwards !important; }

/* ════════════════════════════════════════
   FREE STYLE 1: MINIMAL
   ════════════════════════════════════════ */
.spn-style-minimal {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 36px 12px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}
.spn-style-minimal .spn-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #e0e7ff;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #4f46e5;
    overflow: hidden;
}
.spn-style-minimal .spn-avatar img { width:100%;height:100%;object-fit:cover; }
.spn-style-minimal .spn-body { flex: 1; min-width: 0; }
.spn-style-minimal .spn-name {
    font-size: 13px; font-weight: 600; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spn-style-minimal .spn-action {
    font-size: 12px; color: #6b7280; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spn-style-minimal .spn-action strong { color: #4f46e5; }
.spn-style-minimal .spn-meta {
    font-size: 11px; color: #9ca3af; margin-top: 2px;
}
.spn-style-minimal .spn-bar {
    position: absolute; bottom: 0; left: 0; height: 3px;
    background: #4f46e5; border-radius: 0 0 0 12px;
}

/* ════════════════════════════════════════
   FREE STYLE 2: BUBBLE
   ════════════════════════════════════════ */
.spn-style-bubble {
    background: linear-gradient(135deg,#667eea,#764ba2);
    border-radius: 50px;
    padding: 10px 38px 10px 10px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 6px 20px rgba(102,126,234,0.4);
    position: relative;
    overflow: hidden;
    color: #fff;
}
.spn-style-bubble .spn-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.25);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff; overflow: hidden;
    border: 2px solid rgba(255,255,255,0.5);
}
.spn-style-bubble .spn-avatar img { width:100%;height:100%;object-fit:cover; }
.spn-style-bubble .spn-body { flex: 1; min-width: 0; }
.spn-style-bubble .spn-name { font-size: 13px; font-weight: 700; color: #fff; }
.spn-style-bubble .spn-action { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 1px; }
.spn-style-bubble .spn-action strong { color: #fff; }
.spn-style-bubble .spn-meta { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 2px; }
.spn-style-bubble .spn-bar { position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,0.5);border-radius:0 0 0 50px; }
.spn-style-bubble .spn-close { color: #fff; }

/* ════════════════════════════════════════
   PRO STYLE: CARD WITH SHADOW
   ════════════════════════════════════════ */
.spn-style-card {
    background: var(--spn-bg, #fff);
    border-radius: 16px;
    padding: 14px 38px 14px 14px;
    display: flex; align-items: flex-start; gap: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    position: relative; overflow: hidden;
    border-left: 4px solid var(--spn-accent, #4f46e5);
}
.spn-style-card .spn-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: #ede9fe; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: var(--spn-accent,#4f46e5);
    overflow: hidden;
}
.spn-style-card .spn-avatar img { width:100%;height:100%;object-fit:cover; }
.spn-style-card .spn-body { flex: 1; min-width: 0; }
.spn-style-card .spn-name { font-size: 14px; font-weight: 700; color: var(--spn-text,#111); }
.spn-style-card .spn-action { font-size: 13px; color: #6b7280; margin-top: 2px; }
.spn-style-card .spn-action strong { color: var(--spn-accent,#4f46e5); }
.spn-style-card .spn-meta { font-size: 11px; color: #9ca3af; margin-top: 4px; display:flex; gap: 8px; }
.spn-style-card .spn-bar { position:absolute;bottom:0;left:0;height:3px;background:var(--spn-accent,#4f46e5); }
.spn-style-card .spn-verified { font-size:11px;color:#10b981; }

/* ════════════════════════════════════════
   PRO STYLE: GLASSMORPHISM
   ════════════════════════════════════════ */
.spn-style-glass {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 16px;
    padding: 14px 38px 14px 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    position: relative; overflow: hidden; color: #fff;
}
.spn-style-glass::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(135deg,rgba(255,255,255,0.2),rgba(255,255,255,0.05));
    pointer-events:none;
}
.spn-style-glass .spn-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.25); flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;font-weight:700;color:#fff;overflow:hidden;
    border:1px solid rgba(255,255,255,0.4);
}
.spn-style-glass .spn-avatar img { width:100%;height:100%;object-fit:cover; }
.spn-style-glass .spn-body { flex:1;min-width:0; }
.spn-style-glass .spn-name { font-size:13px;font-weight:700;color:#fff; }
.spn-style-glass .spn-action { font-size:12px;color:rgba(255,255,255,0.85);margin-top:2px; }
.spn-style-glass .spn-action strong { color:#fff;text-decoration:underline; }
.spn-style-glass .spn-meta { font-size:11px;color:rgba(255,255,255,0.65);margin-top:2px; }
.spn-style-glass .spn-bar { position:absolute;bottom:0;left:0;height:2px;background:rgba(255,255,255,0.6); }
.spn-style-glass .spn-close { color:#fff; }

/* ════════════════════════════════════════
   PRO STYLE: DARK MODE
   ════════════════════════════════════════ */
.spn-style-dark {
    background: #1e1e2e;
    border: 1px solid #2d2d44;
    border-radius: 12px;
    padding: 14px 38px 14px 14px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    position: relative; overflow: hidden; color: #e2e8f0;
}
.spn-style-dark .spn-avatar {
    width: 40px;height: 40px;border-radius: 50%;
    background: #2d2d44;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;font-weight:700;color:var(--spn-accent,#818cf8);overflow:hidden;
}
.spn-style-dark .spn-avatar img { width:100%;height:100%;object-fit:cover; }
.spn-style-dark .spn-body { flex:1;min-width:0; }
.spn-style-dark .spn-name { font-size:13px;font-weight:600;color:#f1f5f9; }
.spn-style-dark .spn-action { font-size:12px;color:#94a3b8;margin-top:2px; }
.spn-style-dark .spn-action strong { color:var(--spn-accent,#818cf8); }
.spn-style-dark .spn-meta { font-size:11px;color:#475569;margin-top:2px; }
.spn-style-dark .spn-bar { position:absolute;bottom:0;left:0;height:2px;background:var(--spn-accent,#818cf8); }
.spn-style-dark .spn-close { color:#94a3b8; }

/* ════════════════════════════════════════
   PRO STYLE: NEON GLOW
   ════════════════════════════════════════ */
.spn-style-neon {
    background: #0a0a0f;
    border: 1px solid var(--spn-accent,#00ff88);
    border-radius: 8px;
    padding: 14px 38px 14px 14px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 0 20px rgba(0,255,136,0.25), inset 0 0 20px rgba(0,255,136,0.05);
    position: relative; overflow: hidden;
}
.spn-style-neon .spn-avatar {
    width: 40px;height: 40px;border-radius: 4px;
    background: #111; flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;font-weight:700;
    color:var(--spn-accent,#00ff88);overflow:hidden;
    border:1px solid var(--spn-accent,#00ff88);
}
.spn-style-neon .spn-avatar img { width:100%;height:100%;object-fit:cover; }
.spn-style-neon .spn-body { flex:1;min-width:0; }
.spn-style-neon .spn-name { font-size:13px;font-weight:700;color:#fff;letter-spacing:.5px; }
.spn-style-neon .spn-action { font-size:12px;color:#6b7280;margin-top:2px; }
.spn-style-neon .spn-action strong { color:var(--spn-accent,#00ff88); }
.spn-style-neon .spn-meta { font-size:11px;color:#374151;margin-top:2px; }
.spn-style-neon .spn-bar { position:absolute;bottom:0;left:0;height:2px;background:var(--spn-accent,#00ff88);box-shadow:0 0 8px var(--spn-accent,#00ff88); }
.spn-style-neon .spn-close { color:#6b7280; }

/* ════════════════════════════════════════
   PRO STYLE: EMOJI BURST
   ════════════════════════════════════════ */
.spn-style-emoji {
    background: #fffbeb;
    border: 2px solid #fde68a;
    border-radius: 16px;
    padding: 12px 38px 12px 12px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 4px 16px rgba(251,191,36,0.2);
    position: relative; overflow: hidden;
}
.spn-style-emoji .spn-avatar {
    width: 42px;height: 42px;border-radius: 50%;
    background: #fef3c7;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;overflow:hidden;
}
.spn-style-emoji .spn-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.spn-style-emoji .spn-body { flex:1;min-width:0; }
.spn-style-emoji .spn-name { font-size:13px;font-weight:700;color:#92400e; }
.spn-style-emoji .spn-action { font-size:12px;color:#b45309;margin-top:1px; }
.spn-style-emoji .spn-action strong { color:#d97706; }
.spn-style-emoji .spn-meta { font-size:11px;color:#d97706;margin-top:2px; }
.spn-style-emoji .spn-bar { position:absolute;bottom:0;left:0;height:3px;background:#fbbf24; }

/* ── MOBILE ───────────────────────────── */
@media (max-width: 480px) {
    .spn-notif { max-width: calc(100vw - 32px); min-width: 220px; }
    #spn-root.spn-pos-bottom-left,
    #spn-root.spn-pos-bottom-right { left: 16px; right: 16px; bottom: 16px; }
    #spn-root.spn-pos-top-left,
    #spn-root.spn-pos-top-right    { left: 16px; right: 16px; top: 70px; }
}