/* reconnect-modal.css
 *
 * Only styles that Tailwind utilities cannot express live here:
 *
 *  1. The outer #components-reconnect-modal layout — Blazor replaces the
 *     element's class attribute entirely, so Tailwind classes on it would
 *     be wiped. The show/hide toggling is driven by the Blazor-managed class.
 *
 *  2. The panel show/hide selectors — compound selectors keyed off the
 *     Blazor-managed parent class (#id.blazor-class .child).
 *
 *  3. The spinner — the dark-mode override targets only border-top-color
 *     (keeping the halo in white/10) which cannot be expressed with Tailwind's
 *     dark: variant alone without a specificity conflict.
 */

/* ── Outer container (class managed by Blazor) ──────────────────────────── */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: var(--surface);
    align-items: center;
    justify-content: center;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
    }

/* ── Inner panel visibility (compound selectors off Blazor class) ──────── */
.rcn-show-only {
    display: none;
}

.rcn-failed-only {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .rcn-show-only {
    display: flex;
}

#components-reconnect-modal.components-reconnect-failed .rcn-failed-only,
#components-reconnect-modal.components-reconnect-rejected .rcn-failed-only {
    display: flex;
}

/* ── Spinner ────────────────────────────────────────────────────────────── */
@keyframes rcn-spin {
    to {
        transform: rotate(360deg);
    }
}

.rcn-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--brand);
    border-radius: 9999px;
    animation: rcn-spin 0.8s linear infinite;
}

.dark .rcn-spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: var(--brand);
}

/* ── Spinner on the LeadWin pages ──────────────────────────────────────────
 * There the ring turns in the mark's own gradient instead of the Feedbax blue —
 * the same electric indigo to electric violet the round logo above it is drawn
 * in — so the two things on the curtain are one colour. A border takes a single
 * flat colour, so that ring is a stroked SVG circle instead (_ReconnectModal);
 * only its size, its turn and its track live here. Everything else about it is
 * geometry and belongs with the markup.
 */
.rcn-spinner-leadwin {
    width: 2rem;
    height: 2rem;
    animation: rcn-spin 0.8s linear infinite;
}

.rcn-spinner-track {
    stroke: rgba(0, 0, 0, 0.1);
}

.dark .rcn-spinner-track {
    stroke: rgba(255, 255, 255, 0.1);
}

/* ── Widget: a floating pill instead of a curtain ──────────────────────────
 * The app covers its whole page while the circuit is away — the page IS the app.
 * The widget is a chat on somebody else's website: the transcript is worth
 * keeping in view, and a full-height curtain with a logo reads as "the chat
 * crashed". So there the same element becomes a small pill floating above the
 * bottom edge, centred, the way a toast does: the conversation stays readable
 * and the pill says what is happening. It used to be a strip pinned edge to
 * edge over the composer, which read as part of the chrome rather than as a
 * passing notice. Keyed off the body's data-lw-widget, the same hook the
 * widget's other page-wide styles use. Centred with auto margins between
 * left and right, not with left: 50% and a transform: that way the box only
 * gets the half of the widget right of centre to size itself in, and the
 * notice wrapped onto two lines. max-content keeps the sentence on one line
 * as long as the widget is wide enough for it.
 */
@keyframes rcn-float-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-lw-widget] #components-reconnect-modal {
    /* 2.5rem, not 1rem: the powered-by line is the bottom 1.5rem of the widget, and a pill sitting
     * on it hid the credit. This clears the line with the same 1rem breathing room above it. */
    inset: auto 1rem 2.5rem 1rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 9999px;
    box-shadow: 0 0 24px -4px rgba(0, 0, 0, 0.2);
    animation: rcn-float-in 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    [data-lw-widget] #components-reconnect-modal {
        animation: none;
    }
}

    [data-lw-widget] #components-reconnect-modal > div {
        flex-direction: row;
        gap: 0.75rem;
    }

    /* .rcn-brand is the LeadWin mark and wordmark, which are inline SVG and text rather than an <img>:
     * the pill drops the logo whichever of the two forms it takes. */
    [data-lw-widget] #components-reconnect-modal img,
    [data-lw-widget] #components-reconnect-modal .rcn-brand {
        display: none;
    }

    [data-lw-widget] #components-reconnect-modal .rcn-show-only,
    [data-lw-widget] #components-reconnect-modal.components-reconnect-show .rcn-show-only,
    [data-lw-widget] #components-reconnect-modal.components-reconnect-failed .rcn-failed-only,
    [data-lw-widget] #components-reconnect-modal.components-reconnect-rejected .rcn-failed-only {
        flex-direction: row;
        align-items: center;
        gap: 0.625rem;
    }

    [data-lw-widget] #components-reconnect-modal .rcn-spinner {
        width: 1rem;
        height: 1rem;
        border-width: 2px;
    }

    [data-lw-widget] #components-reconnect-modal p {
        font-size: 0.8125rem;
        line-height: 1.25rem;
    }

    [data-lw-widget] #components-reconnect-modal button {
        margin-top: 0;
        padding: 0.25rem 0.75rem;
        font-size: 0.8125rem;
    }

/* ── Provider logo (widget) ─────────────────────────────────────────────────
 * Bounded by height rather than width: a wordmark and a square mark are wildly
 * different shapes, and only a height cap lands both at the same visual weight.
 * Sized here rather than with Tailwind utilities: the modal has to keep working
 * from a cold cache in a third-party iframe, and a hand-written rule cannot be
 * dropped by a stale utility bundle.
 */
.rcn-logo {
    max-height: 2.75rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}