/*
    Styles for the experimental research chat (/research) and its shared panels.

    Global rather than per-component scoped CSS on purpose: the page plus
    ResearchActivityPanel / ResearchSourcesPanel / ResearchSourceItem form one visual family that
    spans four components, and Blazor CSS isolation cannot style a grandchild component's markup.

    Every class is prefixed "research-" so nothing here can reach the existing Chat/RAG pages, which
    keep their own scoped styles. Colours, radii and shadows come from the existing --fl-* tokens and
    Bootstrap theme variables in app.css, so the experiment inherits the application's look and both
    colour schemes without new brand values.
*/

/* ---------------------------------------------------------------- page shell */

.research-page {
    padding-bottom: 2rem;
}

.research-header {
    margin-bottom: 1.25rem;
}

.research-experiment-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .2rem .6rem;
    border-radius: var(--fl-pill-radius);
    color: color-mix(in srgb, var(--bs-warning) 70%, var(--bs-body-color));
    background: color-mix(in srgb, var(--bs-warning) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-warning) 40%, transparent);
}

.research-layout {
    align-items: flex-start;
}

/* ------------------------------------------------------------------- cards */

.research-card {
    background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
    box-shadow: var(--fl-shadow-soft);
    overflow: hidden;
}

/* The conversation card is bounded to the viewport height on desktop so that its last child (the
   composer) is always on screen instead of falling below the fold. The message area flexes to fill
   whatever is left over, but keeps a floor so a short viewport scrolls the page rather than
   collapsing the conversation. The card itself cannot host a sticky composer: the app-wide
   ".card { backdrop-filter }" makes the card a containing block for its sticky descendants. */
@media (min-width: 992px) {
    .research-chat-card {
        display: flex;
        flex-direction: column;
        height: max(40rem, calc(100dvh - 17.5rem));
    }

    .research-chat-card .research-card-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    .research-chat-card .research-scroll {
        flex: 1 1 auto;
        min-height: 6rem;
        height: auto;
    }
}

.research-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    background: color-mix(in srgb, var(--bs-primary) 5%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 60%, transparent);
}

.research-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.research-conversation-title {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.research-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    color: #fff;
    background: var(--fl-gradient-primary);
    flex: 0 0 auto;
}

.research-card-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
}

.research-card-controls .hx-form-group {
    margin-bottom: 0;
}

.research-header-buttons {
    display: flex;
    gap: .35rem;
}

.research-icon-button {
    border-radius: var(--fl-button-radius);
}

.research-card-body {
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* -------------------------------------------------------------- conversation */

.research-scroll {
    overflow-y: auto;
    padding: 1.5rem 1.25rem .5rem;
    height: min(52rem, calc(100dvh - 8.5rem));
    scroll-behavior: smooth;
}

.research-message {
    animation: research-fade-in .18s ease-out;
}

@keyframes research-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.research-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    flex: 0 0 auto;
    font-size: .95rem;
}

.research-avatar.is-assistant {
    color: #fff;
    background: var(--fl-gradient-primary);
    box-shadow: var(--fl-shadow-soft);
}

.research-avatar.is-user {
    color: var(--bs-body-color);
    background: color-mix(in srgb, var(--bs-secondary-bg) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
}

.research-bubble-wrapper {
    min-width: 0;
    max-width: min(58rem, 100%);
}

.research-bubble {
    border-radius: var(--fl-chat-radius);
    padding: .85rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
    overflow-wrap: anywhere;
}

.research-bubble.is-assistant {
    background: color-mix(in srgb, var(--bs-body-bg) 96%, transparent);
}

.research-bubble.is-user {
    background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-primary) 28%, transparent);
}

.research-user-text {
    white-space: pre-wrap;
}

.research-placeholder {
    color: var(--bs-secondary-color);
    font-style: italic;
}

.research-live-bubble {
    border-color: color-mix(in srgb, var(--bs-primary) 30%, transparent);
}

.research-status-line {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin-bottom: .6rem;
    padding: .45rem .65rem;
    font-size: .85rem;
    border-radius: var(--fl-input-radius);
    background: color-mix(in srgb, var(--bs-warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-warning) 35%, transparent);
}

.research-answer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin-top: .45rem;
}

.research-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: var(--fl-pill-radius);
    color: var(--bs-secondary-color);
    background: color-mix(in srgb, var(--bs-secondary-bg) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
    white-space: nowrap;
}

.research-chip.is-model {
    color: color-mix(in srgb, var(--bs-primary) 80%, var(--bs-body-color));
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--bs-primary) 30%, transparent);
}

.research-chip.is-current {
    color: color-mix(in srgb, var(--bs-success) 75%, var(--bs-body-color));
    background: color-mix(in srgb, var(--bs-success) 14%, transparent);
    border-color: color-mix(in srgb, var(--bs-success) 35%, transparent);
}

.research-chip.is-historical {
    color: color-mix(in srgb, var(--bs-warning) 70%, var(--bs-body-color));
    background: color-mix(in srgb, var(--bs-warning) 16%, transparent);
    border-color: color-mix(in srgb, var(--bs-warning) 38%, transparent);
}

.research-chip-suggestion {
    cursor: pointer;
    font-size: .82rem;
    padding: .4rem .8rem;
    transition: all .2s ease;
}

.research-chip-suggestion:hover {
    transform: translateY(-1px);
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent);
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
}

.research-bubble-actions {
    display: flex;
    gap: .15rem;
    margin-top: .3rem;
    opacity: .55;
    transition: opacity .2s ease;
}

.research-bubble-wrapper:hover .research-bubble-actions {
    opacity: 1;
}

.research-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    font-size: .82rem;
    color: var(--bs-secondary-color);
    background: transparent;
    border: none;
    border-radius: var(--fl-button-radius);
    transition: all .2s ease;
}

.research-icon-btn:hover {
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}

/* -------------------------------------------------------------- empty state */

.research-empty {
    max-width: 40rem;
    margin: 2.5rem auto;
    text-align: center;
}

.research-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: .85rem;
    font-size: 1.4rem;
    color: #fff;
    border-radius: 50%;
    background: var(--fl-gradient-primary);
    box-shadow: var(--fl-shadow-soft);
}

.research-empty-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 1.1rem 0;
}

.research-empty-note {
    font-size: .82rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

/* --------------------------------------------------- reasoning + status bits */

.research-reasoning {
    margin-top: .75rem;
    border-radius: var(--fl-input-radius);
    border: 1px dashed color-mix(in srgb, var(--bs-border-color) 85%, transparent);
    background: color-mix(in srgb, var(--bs-secondary-bg) 45%, transparent);
}

.research-reasoning > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .7rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.research-reasoning > summary::-webkit-details-marker {
    display: none;
}

.research-reasoning[open] > summary {
    border-bottom: 1px dashed color-mix(in srgb, var(--bs-border-color) 70%, transparent);
}

.research-reasoning-body {
    padding: .7rem;
    font-size: .85rem;
    white-space: pre-wrap;
    color: var(--bs-secondary-color);
}

.research-typing {
    display: inline-flex;
    gap: .28rem;
    align-items: center;
    padding: .15rem 0;
}

.dot {
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-primary) 70%, transparent);
    animation: research-bounce 1.2s infinite ease-in-out;
}

.dot:nth-child(2) { animation-delay: .15s; }
.dot:nth-child(3) { animation-delay: .3s; }

@keyframes research-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ------------------------------------------------------------------- errors */

.research-error {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 1.25rem .75rem;
    padding: .6rem .8rem;
    font-size: .88rem;
    border-radius: var(--fl-input-radius);
    color: color-mix(in srgb, var(--bs-danger) 80%, var(--bs-body-color));
    background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-danger) 35%, transparent);
}

.research-error span {
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------- composer */

.research-composer {
    padding: .75rem 1.25rem 1rem;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
}

.research-input-group {
    border-radius: var(--fl-input-radius);
    overflow: hidden;
    box-shadow: var(--fl-shadow-soft);
}

.research-input {
    resize: none;
    min-height: 3.5rem;
    /* Capped because the composer shares a height-bounded card with the message area: an
       unbounded auto-grow would squeeze the conversation to nothing. */
    max-height: 8rem;
    padding: .85rem 1rem;
    border-top-left-radius: var(--fl-input-radius) !important;
    border-bottom-left-radius: var(--fl-input-radius) !important;
}

.research-input-group .btn {
    border-radius: 0;
    padding-inline: 1.1rem;
}

.research-send-btn {
    border-top-right-radius: var(--fl-input-radius) !important;
    border-bottom-right-radius: var(--fl-input-radius) !important;
}

.research-composer-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.research-composer-keys kbd {
    font-size: .7rem;
    padding: .1rem .35rem;
    border-radius: .3rem;
    background: color-mix(in srgb, var(--bs-secondary-bg) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
    color: var(--bs-secondary-color);
}

/* ----------------------------------------------------- research activity panel */

.research-activity {
    border-radius: var(--fl-input-radius);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
    background: color-mix(in srgb, var(--bs-secondary-bg) 35%, transparent);
    margin-bottom: .5rem;
    overflow: hidden;
}

.research-activity-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .45rem .7rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    background: transparent;
    border: none;
    text-align: left;
}

.research-activity-toggle:hover {
    color: var(--bs-body-color);
    background: color-mix(in srgb, var(--bs-primary) 6%, transparent);
}

.research-activity-title {
    flex: 1 1 auto;
}

.research-activity-count,
.research-activity-elapsed {
    font-size: .7rem;
    padding: .05rem .45rem;
    border-radius: var(--fl-pill-radius);
    background: color-mix(in srgb, var(--bs-secondary-bg) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
}

.research-activity-running {
    display: inline-flex;
    gap: .18rem;
    align-items: center;
}

.research-activity-running .dot {
    width: .32rem;
    height: .32rem;
}

.research-activity-empty {
    padding: 0 .7rem .55rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.research-activity-list {
    list-style: none;
    margin: 0;
    padding: 0 0 .4rem;
    /* Bounded so a long tool trace cannot push the composer off the screen; the list scrolls. */
    max-height: 8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.research-activity-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .3rem .7rem;
    font-size: .8rem;
}

.research-activity-item + .research-activity-item {
    border-top: 1px solid color-mix(in srgb, var(--bs-border-color) 30%, transparent);
}

.research-activity-icon {
    color: color-mix(in srgb, var(--bs-primary) 75%, var(--bs-body-color));
    flex: 0 0 auto;
    line-height: 1.4;
}

.research-activity-item.is-error .research-activity-icon {
    color: var(--bs-danger);
}

.research-activity-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.research-activity-name {
    font-weight: 500;
}

.research-activity-detail {
    color: var(--bs-secondary-color);
    font-size: .76rem;
    overflow-wrap: anywhere;
}

.research-activity-duration {
    font-size: .7rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

/* ------------------------------------------------------- sources panel */

.research-sources-card {
    position: sticky;
    top: 1rem;
}

.research-sources-body {
    max-height: min(52rem, calc(100dvh - 12rem));
    overflow-y: auto;
    padding: .85rem;
}

.research-sources-note {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    margin-bottom: .6rem;
}

.research-sources-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 2rem 1rem;
    text-align: center;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.research-sources-block + .research-sources-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--bs-border-color) 50%, transparent);
}

.research-sources-heading {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.research-sources-heading i {
    color: color-mix(in srgb, var(--bs-primary) 75%, var(--bs-body-color));
}

.research-sources-count {
    font-size: .7rem;
    font-weight: 500;
    padding: .05rem .4rem;
    border-radius: var(--fl-pill-radius);
    background: color-mix(in srgb, var(--bs-secondary-bg) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
}

.research-source {
    margin-top: .6rem;
    padding: .6rem .7rem;
    border-radius: var(--fl-input-radius);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 50%, transparent);
    background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
}

.research-source.is-cited {
    border-color: color-mix(in srgb, var(--bs-success) 40%, transparent);
    background: color-mix(in srgb, var(--bs-success) 6%, transparent);
}

.research-source-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .4rem;
}

.research-source-title {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
}

.research-source-cited {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 600;
    padding: .05rem .4rem;
    border-radius: var(--fl-pill-radius);
    color: color-mix(in srgb, var(--bs-success) 75%, var(--bs-body-color));
    background: color-mix(in srgb, var(--bs-success) 16%, transparent);
}

.research-source-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .35rem;
}

.research-source-meta .research-chip {
    font-size: .68rem;
    padding: .1rem .45rem;
}

.research-source-provisions {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .45rem;
}

.research-provision-link {
    font-size: .72rem;
    padding: .1rem .45rem;
    border-radius: var(--fl-pill-radius);
    color: color-mix(in srgb, var(--bs-primary) 80%, var(--bs-body-color));
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 26%, transparent);
}

.research-provision-link:hover {
    background: color-mix(in srgb, var(--bs-primary) 20%, transparent);
}

.research-source-external {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .45rem;
    font-size: .72rem;
    color: var(--bs-secondary-color);
}

.research-source-external:hover {
    color: var(--bs-primary);
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
    /* Same bounded-workspace trick as on desktop, so the composer stays reachable without
       scrolling the page: the message area flexes to fill what the card header and composer
       leave over. The page intro paragraph is decorative on phones and is dropped to make room. */
    .research-header p {
        display: none;
    }

    .research-chat-card {
        display: flex;
        flex-direction: column;
        height: max(41rem, calc(100dvh - 12rem));
    }

    /* Keep the composer's growth bounded so it cannot outgrow the card and be clipped by it. */
    .research-input {
        max-height: 6rem;
    }

    .research-chat-card .research-card-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    .research-scroll {
        flex: 1 1 auto;
        min-height: 6rem;
        height: auto;
        padding: 1rem .85rem .25rem;
    }

    .research-sources-card {
        position: static;
    }

    .research-sources-body {
        max-height: 26rem;
    }

    .research-card-header {
        align-items: stretch;
    }

    .research-card-controls {
        width: 100%;
    }

    .research-composer {
        padding: .6rem .85rem .8rem;
    }
}

@media (max-width: 767.98px) {
    .research-bubble-wrapper {
        max-width: 100%;
    }

    .research-avatar {
        width: 1.9rem;
        height: 1.9rem;
        font-size: .8rem;
    }

    .research-composer-keys {
        display: none;
    }

    .research-activity-list {
        max-height: 4rem;
    }
}

@media (max-width: 420px) {
    .research-scroll {
        padding: .75rem .6rem 0;
    }

    .research-bubble {
        padding: .7rem .8rem;
    }

    .research-empty {
        margin: 1.5rem auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .research-message,
    .dot {
        animation: none;
    }

    .research-scroll {
        scroll-behavior: auto;
    }
}

/* ---------------------------------------------------------------------------
   Developer usage and cost view (/research-usage). Configuration and measurement
   readouts only; nothing here is part of the conversational experience.
   --------------------------------------------------------------------------- */

.research-tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: .5rem;
    padding: .15rem .5rem;
    border-radius: var(--fl-pill-radius, 2rem);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 28%, transparent);
}

.research-usage-toolbar .card-body {
    padding: 1rem 1.1rem;
}

.research-stat .card-body {
    padding: 1.1rem 1.2rem;
}

.research-stat .h3 {
    font-variant-numeric: tabular-nums;
}

.research-table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.research-table th {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.research-table td {
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.research-table code {
    font-size: .82rem;
    color: var(--bs-body-color);
}

@media (max-width: 767.98px) {
    .research-usage-toolbar .card-body {
        align-items: stretch !important;
    }

    .research-usage-toolbar .card-body > * {
        width: 100%;
    }
}