/* notifications.css — Notification and loading patterns */

/* (clipboard-toast removed — replaced by FeedbackManager toasts) */
/* (mobile-notification removed — replaced by FeedbackManager toasts) */

/* Notification permission prompt */
.notif-permission-prompt {
    position: fixed;
    top: 60px;
    right: 20px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: var(--text-md);
    z-index: var(--z-max);
    box-shadow: var(--shadow-md);
    max-width: 300px;
}

.notif-permission-prompt .prompt-body {
    margin-bottom: 10px;
}

.notif-permission-prompt .prompt-actions {
    display: flex;
    gap: 10px;
}

/* ---- Reusable loading patterns ---- */

/* Inline spinner (next to buttons/actions) */
.loading-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent-default);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* Overlay spinner (centered in container) */
.loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: var(--text-base);
    gap: 12px;
}

.loading-overlay::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-default);
    border-top-color: var(--accent-default);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Skeleton placeholder bars */
.loading-skeleton {
    background: linear-gradient(90deg, var(--surface-tertiary) 25%, var(--surface-elevated) 50%, var(--surface-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    height: 16px;
    margin-bottom: 8px;
}

.loading-skeleton.loading-skeleton-lg { height: 44px; }
.loading-skeleton.loading-skeleton-sm { height: 10px; width: 60%; }

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* (sw-update-banner removed — will use FeedbackManager toasts) */