/* RD-3670 — la invitación a conectar el MCP de Leanmote a una herramienta de IA.
 *
 * Geometry is the other two strips' (css/integrations/extraction-progress-banner.css,
 * css/shared/resume-setup-banner.css): a full-width line pinned above the
 * organization name, starting at the sidebar's right edge, and the same tint and
 * blue left border as the resume-setup strip. It is a suggestion, not news: one
 * line, almost no colour.
 *
 * ## Stacking
 *
 * Third of three. Its `top` is the sum of the two above it, each variable
 * defaulting to 0px when its strip is absent. In practice the resume-setup strip
 * is never up with this one (the server skips the invite while the setup is
 * pending), but the sum costs nothing and leaves no combination to forget.
 *
 * The clearance the body owes is that sum plus this strip's own height. The
 * class goes THREE times on purpose: the resume-setup rules weigh (0,3,1) with
 * theirs doubled; tripled, this one weighs (0,4,1) and wins whatever else is up,
 * without depending on the load order (head.php loads it last anyway).
 */

.ct-mcp-invite {
    --ct-mi-ink: #3f4254;          /* --bs-gray-700: the product's body ink */
    --ct-mi-muted: #7e8299;        /* --bs-gray-600 */
    --ct-mi-tint: #f9fafb;
    --ct-mi-border: #e4e6ef;
    --ct-mi-accent: #419fff;       /* Leanmote blue */
    --ct-mi-ease: cubic-bezier(0.23, 1, 0.32, 1);

    /* Same layer as the other strips: above the fixed header (100), below the
       sidebar (105). */
    position: fixed;
    top: calc(var(--lm-ep-height, 0px) + var(--lm-rs-height, 0px));
    left: 0;
    right: 0;
    z-index: 101;
    margin: 0;
    background: var(--ct-mi-tint);
    border-bottom: 1px solid var(--ct-mi-border);
    box-shadow: inset 3px 0 0 0 var(--ct-mi-accent);
    color: var(--ct-mi-ink);
    font-size: 0.9375rem;
    line-height: 1.4;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms var(--ct-mi-ease), transform 200ms var(--ct-mi-ease),
                left 300ms ease, top 200ms var(--ct-mi-ease);
}

.ct-mcp-invite__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 20px;
}

.ct-mcp-invite__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.ct-mcp-invite__text {
    flex: 1 1 auto;
    min-width: 0;
    text-wrap: pretty;
}

.ct-mcp-invite__cta {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 6px;
    /* The resume strip's button: #419fff under white is ~2.9:1, this is the
       same hue held to 4.5:1. */
    background: #0a58a8;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms var(--ct-mi-ease), transform 150ms var(--ct-mi-ease);
}

.ct-mcp-invite__cta:hover {
    background: #084683;
    color: #fff;
}

.ct-mcp-invite__cta:active {
    transform: scale(0.98);
}

.ct-mcp-invite__cta:focus-visible,
.ct-mcp-invite__close:focus-visible {
    outline: 2px solid var(--ct-mi-accent);
    outline-offset: 2px;
}

/* Quiet on purpose: the button is the one thing to look at. 32px square so it
   is still an easy target. */
.ct-mcp-invite__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ct-mi-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.ct-mcp-invite__close:hover {
    background: var(--ct-mi-border);
    color: var(--ct-mi-ink);
}

.ct-mcp-invite__close:disabled {
    cursor: default;
}

/* Clear the fixed sidebar: the same attribute, breakpoint and variables as the
   other strips, so collapsing the sidebar moves all four together. */
@media (min-width: 992px) {
    [data-kt-app-sidebar-fixed="true"] .ct-mcp-invite {
        left: calc(
            var(--bs-app-sidebar-width) + var(--bs-app-sidebar-gap-start, 0px) +
                var(--bs-app-sidebar-gap-end, 0px)
        );
    }
}

body.lm-mcp-invite-on.lm-mcp-invite-on.lm-mcp-invite-on .app-header {
    margin-top: calc(
        var(--lm-ep-height, 0px) + var(--lm-rs-height, 0px) + var(--lm-mi-height, 0px)
    );
}

body.lm-mcp-invite-on.lm-mcp-invite-on.lm-mcp-invite-on .app-wrapper {
    padding-top: calc(
        var(--lm-ep-height, 0px) + var(--lm-rs-height, 0px) + var(--lm-mi-height, 0px)
    );
}

/* Enter from its own height and leave the same way: the same distance and
   sub-300ms budget as its neighbours, ease-out both ways (it is entering and
   exiting, not moving on screen). */
.ct-mcp-invite.is-entering,
.ct-mcp-invite.is-hiding {
    opacity: 0;
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .ct-mcp-invite,
    .ct-mcp-invite__cta,
    .ct-mcp-invite__close { transition: none; }
}