/* Pull-to-refresh indicator (js/components/pull-to-refresh.js) */
html.ptr-enabled, html.ptr-enabled body { overscroll-behavior-y: contain; }

.ptr-pill {
    position: fixed;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 36px;
    padding: 0 14px 0 10px;
    border-radius: 999px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    border: 1px solid var(--border-color, rgba(148, 163, 184, .3));
    box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
    font: 600 .78rem/1 inherit;
    font-family: inherit;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -44px);
    transition: opacity .2s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2), background-color .18s ease, color .18s ease;
    white-space: nowrap;
}
.ptr-pill-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .72rem;
    color: #a855f7;
    background: rgba(168, 85, 247, .12);
    transition: background-color .18s ease, color .18s ease, transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.ptr-pill.is-ready .ptr-pill-icon,
.ptr-pill.is-spinning .ptr-pill-icon {
    color: #fff;
    background: linear-gradient(135deg, #a855f7, #ec4899);
}
.ptr-pill.is-ready { color: var(--text-primary, #0f172a); }
.ptr-pill.is-spinning .ptr-pill-icon { animation: ptr-spin .8s linear infinite; }
.ptr-pill.is-done .ptr-pill-icon { color: #fff; background: #10b981; animation: ptr-pop .32s cubic-bezier(.3, 1.6, .5, 1); }

/* The pulled list follows the finger, then springs back. */
.ptr-pulling { transition: none !important; will-change: transform; }
.ptr-settling { transition: transform .3s cubic-bezier(.2, .9, .3, 1.15) !important; }

@keyframes ptr-spin { to { transform: rotate(360deg); } }
@keyframes ptr-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .ptr-pill { transition: opacity .15s linear; }
    .ptr-pill.is-spinning .ptr-pill-icon { animation-duration: 2s; }
    .ptr-pill.is-done .ptr-pill-icon { animation: none; }
}