/* KazooWatch shared interaction feedback. Kept intentionally low-specificity. */
:root {
    --kw-feedback-accent: #7b69c7;
    --kw-feedback-good: #268730;
    --kw-feedback-bad: #b42318;
    --kw-feedback-ink: #17151d;
}

button,
[role="button"],
a.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-tap-highlight-color: transparent;
}

.kw-feedback-control {
    transition: transform 90ms ease, filter 120ms ease, box-shadow 160ms ease, opacity 160ms ease;
    transform-origin: center;
}

.kw-feedback-control.kw-feedback-pressed {
    transform: translateY(1px) scale(.975);
    filter: brightness(.96);
}

.kw-feedback-control.kw-feedback-busy {
    cursor: progress !important;
    opacity: .78;
    box-shadow: 0 0 0 3px rgba(123, 105, 199, .16) !important;
}

.kw-feedback-control.kw-feedback-locked {
    pointer-events: none !important;
}

.kw-feedback-control.kw-feedback-success {
    animation: kw-feedback-success 430ms ease-out;
}

.kw-feedback-control.kw-feedback-error {
    animation: kw-feedback-error 520ms ease-out;
}

@keyframes kw-feedback-success {
    0% { box-shadow: 0 0 0 0 rgba(38, 135, 48, .32); }
    55% { box-shadow: 0 0 0 7px rgba(38, 135, 48, .16); }
    100% { box-shadow: 0 0 0 0 rgba(38, 135, 48, 0); }
}

@keyframes kw-feedback-error {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
}

#kw-interaction-feedback {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 2147483000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(88vw, 360px);
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(23, 21, 29, .94);
    color: #fff;
    box-shadow: 0 14px 42px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font: 750 14px/1.2 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -.01em;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px) scale(.98);
    transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

#kw-interaction-feedback.kw-feedback-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s;
}

#kw-interaction-feedback.kw-feedback-done {
    background: rgba(23, 72, 31, .96);
}

#kw-interaction-feedback.kw-feedback-failed {
    background: rgba(103, 25, 25, .97);
}

.kw-feedback-spinner {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 2px solid rgba(255,255,255,.32);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kw-feedback-spin .72s linear infinite;
}

.kw-feedback-icon {
    display: none;
    width: 16px;
    text-align: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
}

#kw-interaction-feedback.kw-feedback-done .kw-feedback-spinner,
#kw-interaction-feedback.kw-feedback-failed .kw-feedback-spinner {
    display: none;
}

#kw-interaction-feedback.kw-feedback-done .kw-feedback-icon,
#kw-interaction-feedback.kw-feedback-failed .kw-feedback-icon {
    display: inline-block;
}

#kw-interaction-feedback.kw-feedback-done .kw-feedback-icon::before {
    content: "✓";
}

#kw-interaction-feedback.kw-feedback-failed .kw-feedback-icon::before {
    content: "!";
}

.kw-feedback-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147482999;
    width: 100%;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    background: rgba(123, 105, 199, .16);
    transition: opacity 140ms ease;
}

.kw-feedback-progress.kw-feedback-visible {
    opacity: 1;
}

.kw-feedback-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -38%;
    width: 38%;
    background: linear-gradient(90deg, transparent, var(--kw-feedback-accent), #e30796, transparent);
    animation: kw-feedback-progress 1.05s ease-in-out infinite;
}

@keyframes kw-feedback-spin {
    to { transform: rotate(360deg); }
}

@keyframes kw-feedback-progress {
    0% { transform: translateX(0); }
    100% { transform: translateX(365%); }
}

@media (max-width: 640px) {
    #kw-interaction-feedback {
        bottom: max(14px, env(safe-area-inset-bottom));
        max-width: calc(100vw - 28px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kw-feedback-control,
    #kw-interaction-feedback,
    .kw-feedback-progress {
        transition: none !important;
    }
    .kw-feedback-control.kw-feedback-pressed,
    .kw-feedback-control.kw-feedback-error {
        transform: none !important;
        animation: none !important;
    }
    .kw-feedback-control.kw-feedback-success {
        animation: none !important;
        outline: 2px solid rgba(38, 135, 48, .35);
        outline-offset: 2px;
    }
    .kw-feedback-spinner,
    .kw-feedback-progress::after {
        animation-duration: 1.6s;
    }
}