/*
 * Sales Assistant AI — Research Loading Slideshow
 *
 * Responsibility:
 * - reusable slideshow presentation for Research loading states
 * - responsive image viewport
 * - slide captions
 * - indicators
 * - optional tester information ticker
 * - desktop presentation large enough to remain visually prominent
 *
 * Licensing:
 * - no external fonts
 * - no external icons
 * - no third-party UI libraries
 */

.research-loading-slideshow {
    --research-loading-navy: #102b45;
    --research-loading-navy-soft: #183653;
    --research-loading-gold: #b8860b;
    --research-loading-white: #ffffff;
    --research-loading-burgundy: #7f1d1d;
    --research-loading-overlay: rgba(5, 18, 31, 0.72);
    --research-loading-transition-ms: 420ms;

    width: 100%;
    max-width: 760px;
    margin: 14px auto 0;
}

.research-loading-slideshow *,
.research-loading-slideshow *::before,
.research-loading-slideshow *::after {
    box-sizing: border-box;
}

.research-loading-slideshow__viewport {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 8.7;

    overflow: hidden;

    border: 2px solid var(--research-loading-gold);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--research-loading-navy) 0%,
            var(--research-loading-navy-soft) 100%
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.16);
}

.research-loading-slideshow__slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--research-loading-transition-ms) ease,
        visibility var(--research-loading-transition-ms) ease;
}

.research-loading-slideshow__slide--active {
    z-index: 2;

    opacity: 1;
    visibility: visible;
}

.research-loading-slideshow__media {
    position: absolute;
    inset: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 38%
        ),
        linear-gradient(
            135deg,
            var(--research-loading-navy-soft) 0%,
            var(--research-loading-navy) 100%
        );
}

.research-loading-slideshow__media--placeholder::before {
    content: "";

    position: absolute;
    inset: 18%;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.research-loading-slideshow__media--placeholder::after {
    content: "SA";

    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    color: rgba(255, 255, 255, 0.18);

    font-size: clamp(2.2rem, 7vw, 4.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
}

.research-loading-slideshow__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.research-loading-slideshow__shade {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(5, 18, 31, 0.04) 0%,
            rgba(5, 18, 31, 0.14) 48%,
            var(--research-loading-overlay) 100%
        );
}

.research-loading-slideshow__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;

    padding: 18px 22px 17px;

    color: var(--research-loading-white);

    text-align: left;
}

.research-loading-slideshow__title {
    max-width: 660px;
    margin: 0;

    color: var(--research-loading-white);

    font-size: clamp(1rem, 2vw, 1.32rem);
    font-weight: 800;
    line-height: 1.22;

    text-shadow:
        -2px -2px 2px rgba(5, 18, 31, 0.95),
        2px -2px 2px rgba(5, 18, 31, 0.95),
        -2px 2px 2px rgba(5, 18, 31, 0.95),
        2px 2px 2px rgba(5, 18, 31, 0.95),
        0 3px 8px rgba(0, 0, 0, 0.85);
}

.research-loading-slideshow__description {
    max-width: 680px;
    margin: 6px 0 0;

    color: rgba(255, 255, 255, 0.96);

    font-size: 0.86rem;
    line-height: 1.45;

    text-shadow:
        -1px -1px 2px rgba(5, 18, 31, 0.95),
        1px -1px 2px rgba(5, 18, 31, 0.95),
        -1px 1px 2px rgba(5, 18, 31, 0.95),
        1px 1px 2px rgba(5, 18, 31, 0.95),
        0 2px 7px rgba(0, 0, 0, 0.85);
}

.research-loading-slideshow__indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;

    min-height: 16px;
    margin: 7px 0 0;
}

.research-loading-slideshow__indicator {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.28);

    transition:
        width 180ms ease,
        border-radius 180ms ease,
        background 180ms ease;
}

.research-loading-slideshow__indicator--active {
    width: 20px;

    border-radius: 999px;

    background: var(--research-loading-gold);
}

.research-loading-slideshow__ticker {
    position: relative;

    overflow: hidden;

    margin: 8px 0 0;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;

    background: var(--research-loading-burgundy);
    color: var(--research-loading-white);

    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.12);
}

.research-loading-slideshow__ticker-inner {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 36px;
    padding: 7px 12px;
}

.research-loading-slideshow__ticker-label {
    flex: 0 0 auto;

    color: var(--research-loading-white);

    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.research-loading-slideshow__ticker-text {
    min-width: 0;

    color: rgba(255, 255, 255, 0.94);

    font-size: 0.8rem;
    line-height: 1.35;
}

@media (max-width: 700px) {
    .research-loading-slideshow {
        max-width: 100%;
        margin-top: 12px;
    }

    .research-loading-slideshow__viewport {
        aspect-ratio: 4 / 3;
        border-radius: 13px;
    }

    .research-loading-slideshow__caption {
        padding: 16px 16px 15px;
    }

    .research-loading-slideshow__description {
        font-size: 0.82rem;
    }

    .research-loading-slideshow__ticker-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

/*
 * Compact desktop layout.
 *
 * The slideshow remains large enough to be a primary visual element
 * even on shorter laptop and desktop browser windows.
 */
@media (max-height: 900px) and (min-width: 701px) {
    .research-loading-slideshow {
        max-width: 680px;
        margin-top: 8px;
    }

    .research-loading-slideshow__viewport {
        border-radius: 13px;
    }

    .research-loading-slideshow__caption {
        padding: 14px 18px 13px;
    }

    .research-loading-slideshow__title {
        font-size: 1.08rem;
        line-height: 1.2;
    }

    .research-loading-slideshow__description {
        margin-top: 4px;

        font-size: 0.8rem;
        line-height: 1.34;
    }

    .research-loading-slideshow__indicators {
        min-height: 12px;
        margin-top: 4px;
        gap: 5px;
    }

    .research-loading-slideshow__indicator {
        width: 5px;
        height: 5px;
    }

    .research-loading-slideshow__indicator--active {
        width: 17px;
    }

    .research-loading-slideshow__ticker {
        margin-top: 5px;
        border-radius: 8px;
    }

    .research-loading-slideshow__ticker-inner {
        min-height: 29px;
        padding: 5px 9px;
    }

    .research-loading-slideshow__ticker-label {
        font-size: 0.62rem;
    }

    .research-loading-slideshow__ticker-text {
        font-size: 0.7rem;
        line-height: 1.25;
    }
}

@media (max-height: 720px) and (min-width: 701px) {
    .research-loading-slideshow {
        max-width: 620px;
        margin-top: 6px;
    }

    .research-loading-slideshow__caption {
        padding: 12px 16px 11px;
    }

    .research-loading-slideshow__title {
        font-size: 1rem;
    }

    .research-loading-slideshow__description {
        font-size: 0.75rem;
        line-height: 1.28;
    }

    .research-loading-slideshow__indicators {
        min-height: 10px;
        margin-top: 3px;
    }

    .research-loading-slideshow__ticker {
        margin-top: 4px;
    }

    .research-loading-slideshow__ticker-inner {
        min-height: 27px;
        padding: 4px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .research-loading-slideshow__slide,
    .research-loading-slideshow__indicator {
        transition: none;
    }
}
/*
 * Final Report loading — compact desktop presentation.
 *
 * Applies only to the slideshow shown after the 25-question
 * Deep Interview while the Final Report is being generated.
 *
 * Q6 analysis slideshow remains unchanged.
 */
@media (min-width: 701px) {
    .research-assistant__final-report-loading
    .research-loading-slideshow {
        max-width: 620px;
        margin-top: 6px;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__viewport {
        aspect-ratio: 16 / 7.6;
        border-radius: 13px;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__caption {
        padding: 12px 16px 11px;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__title {
        font-size: 1rem;
        line-height: 1.18;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__description {
        margin-top: 4px;
        font-size: 0.75rem;
        line-height: 1.28;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__indicators {
        min-height: 10px;
        margin-top: 3px;
        gap: 5px;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__indicator {
        width: 5px;
        height: 5px;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__indicator--active {
        width: 17px;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__ticker {
        margin-top: 4px;
        border-radius: 8px;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__ticker-inner {
        min-height: 27px;
        padding: 4px 8px;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__ticker-label {
        font-size: 0.62rem;
    }

    .research-assistant__final-report-loading
    .research-loading-slideshow__ticker-text {
        font-size: 0.7rem;
        line-height: 1.2;
    }
}