:root {
    --qs-indicator-success: #16A34A;
    --qs-indicator-establishing: #F97316;
    --qs-indicator-failed: #DC2626;
    --qs-indicator-surface: rgba(15, 23, 42, 0.08);
    --qs-indicator-text: var(--neutral-900, #0F172A);
}

.qs-connection-indicator {
    --qs-indicator-active: var(--qs-indicator-establishing);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--qs-indicator-active) 20%, transparent);
    background: color-mix(in srgb, var(--qs-indicator-active) 10%, white);
    color: var(--qs-indicator-active);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.qs-connection-indicator__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    animation: qs-connection-pulse 1.8s ease-in-out infinite;
}

.qs-connection-indicator__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.qs-connection-indicator__title {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.qs-connection-indicator__status {
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qs-connection-indicator--auth {
    width: 100%;
    justify-content: center;
    border-radius: 1rem;
}

.qs-connection-indicator--floating {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 2400;
    min-width: 12.5rem;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.78rem 1rem;
    border-color: color-mix(in srgb, var(--qs-indicator-active) 34%, rgba(148, 163, 184, 0.32));
    background: color-mix(in srgb, var(--qs-indicator-active) 12%, rgba(255, 255, 255, 0.94));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
}

.qs-connection-indicator--floating .qs-connection-indicator__title {
    color: var(--qs-indicator-text);
}

.qs-connection-indicator--floating[data-qs-visual-state="successfully-connected"] .qs-connection-indicator__dot {
    animation-duration: 2.6s;
}

.qs-connection-indicator[data-qs-visual-state="successfully-connected"] {
    --qs-indicator-active: var(--qs-indicator-success);
}

.qs-connection-indicator[data-qs-visual-state="failed"] {
    --qs-indicator-active: var(--qs-indicator-failed);
}

.qs-connection-banner {
    --qs-banner-active: var(--qs-indicator-establishing);
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--qs-banner-active) 35%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--qs-banner-active) 14%, white), color-mix(in srgb, var(--qs-banner-active) 7%, white));
    color: var(--qs-banner-active);
    font-size: 0.82rem;
    font-weight: 700;
}

.qs-connection-banner[data-qs-visual-state="successfully-connected"] {
    --qs-banner-active: var(--qs-indicator-success);
}

.qs-connection-banner[data-qs-visual-state="failed"] {
    --qs-banner-active: var(--qs-indicator-failed);
}

.qs-connection-banner__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[data-qs-protected-surface] {
    position: relative;
}

[data-qs-protected-surface].qs-protected-surface--blocked {
    pointer-events: none;
    user-select: none;
}

[data-qs-protected-surface].qs-protected-surface--blocked > *:not(.qs-protected-surface__overlay) {
    filter: blur(1.5px);
    opacity: 0.28;
}

.qs-protected-surface__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border-radius: inherit;
    background: rgba(15, 23, 42, 0.86);
    color: var(--neutral-50, #F8FAFC);
    text-align: center;
    z-index: 5;
}

[data-qs-protected-surface][data-qs-self-shielding="true"] .qs-protected-surface__overlay {
    background: rgba(15, 23, 42, 0.78);
}

.qs-protected-surface__overlay-text {
    max-width: 34rem;
    font-weight: 700;
    line-height: 1.45;
}

@keyframes qs-connection-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent);
    }

    50% {
        opacity: 0.52;
        box-shadow: 0 0 0 0.4rem color-mix(in srgb, currentColor 16%, transparent);
    }
}

@media (max-width: 520px) {
    .qs-connection-indicator--floating {
        right: 1rem;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        min-width: 0;
        width: calc(100vw - 2rem);
        justify-content: center;
    }
}