.npsi-slide-in {
    --npsi-tab-size: 46px;
    position: fixed;
    z-index: 999990;
    width: min(var(--npsi-width), calc(100vw - 20px));
    color: var(--npsi-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    visibility: hidden;
    opacity: 0;
    transition: transform var(--npsi-duration) cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    will-change: transform;
}

.npsi-slide-in.is-ready { visibility: visible; opacity: 1; }
.npsi-pos-top-right { top: var(--npsi-y); right: var(--npsi-x); }
.npsi-pos-top-left { top: var(--npsi-y); left: var(--npsi-x); }
.npsi-pos-bottom-right { bottom: var(--npsi-y); right: var(--npsi-x); }
.npsi-pos-bottom-left { bottom: var(--npsi-y); left: var(--npsi-x); }
.npsi-pos-top-right.is-collapsed,
.npsi-pos-bottom-right.is-collapsed { transform: translateX(calc(100% - var(--npsi-tab-size))); }
.npsi-pos-top-left.is-collapsed,
.npsi-pos-bottom-left.is-collapsed { transform: translateX(calc(-100% + var(--npsi-tab-size))); }
.npsi-slide-in.is-open { transform: translateX(0); }

.npsi-panel-content {
    overflow: hidden;
    position: relative;
    background: var(--npsi-bg);
    border: 1px solid color-mix(in srgb, var(--npsi-accent) 42%, #c3c4c7);
    border-radius: 14px;
    box-shadow: 0 18px 52px rgba(0,0,0,.24);
}

.npsi-image { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.npsi-copy { padding: 22px; }
.npsi-copy h2 { margin: 0 30px 8px 0; color: var(--npsi-text); font-size: 23px; line-height: 1.2; }
.npsi-message, .npsi-message p { color: var(--npsi-text); font-size: 15px; line-height: 1.55; }
.npsi-message p { margin: 0 0 14px; }
.npsi-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 17px;
    border-radius: 7px;
    background: var(--npsi-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.2;
}
.npsi-cta:hover, .npsi-cta:focus { color: #fff; filter: brightness(.9); text-decoration: none; }

.npsi-close {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 9px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: 25px;
    line-height: 30px;
    cursor: pointer;
}

.npsi-tab {
    position: absolute;
    z-index: 4;
    top: 14px;
    width: var(--npsi-tab-size);
    min-height: 132px;
    padding: 9px 8px;
    border: 0;
    background: var(--npsi-tab);
    color: var(--npsi-tab-text);
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    cursor: pointer;
}
.npsi-tab span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; font-weight: 700; letter-spacing: .035em; }
.npsi-pos-top-right .npsi-tab,
.npsi-pos-bottom-right .npsi-tab { left: 0; border-radius: 10px 0 0 10px; }
.npsi-pos-top-left .npsi-tab,
.npsi-pos-bottom-left .npsi-tab { right: 0; border-radius: 0 10px 10px 0; }
.npsi-slide-in.is-open .npsi-tab { opacity: 0; pointer-events: none; }
.npsi-tab:focus-visible, .npsi-close:focus-visible, .npsi-cta:focus-visible { outline: 3px solid #72aee6; outline-offset: 2px; }

@media (max-width: 700px) {
    .npsi-slide-in { width: min(var(--npsi-width), calc(100vw - 20px)); }
    .npsi-pos-top-right { top: var(--npsi-mobile-y); right: var(--npsi-mobile-x); }
    .npsi-pos-top-left { top: var(--npsi-mobile-y); left: var(--npsi-mobile-x); }
    .npsi-pos-bottom-right { bottom: var(--npsi-mobile-y); right: var(--npsi-mobile-x); }
    .npsi-pos-bottom-left { bottom: var(--npsi-mobile-y); left: var(--npsi-mobile-x); }
    .npsi-copy { padding: 18px; }
    .npsi-copy h2 { font-size: 20px; }
    .npsi-image { max-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    .npsi-slide-in { transition-duration: 1ms !important; }
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .npsi-panel-content { border-color: #c3c4c7; }
}