/* Notification bars above the AI model list. The bars are only present when there is
   something to report, so the spacing lives on this container rather than on the bars -
   an empty container is never rendered and therefore never leaves a gap behind. */
.sc-ui-ai-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block-end: 16px;
}

/* The launch (transact) action sits below the model selector and applies to the whole
   selection, so it stretches across the full panel width, separated from the choice
   list above it. */
.sc-ui-ai-launch-footer {
    display: flex;
    margin-top: 12px;
}

    .sc-ui-ai-launch-footer fluent-button {
        flex: 1 1 auto;
    }

/* Fluent-token driven so light and dark modes both resolve correctly. The panel carries
   the outer border so the whole result set reads as one surface. */
.sc-ui-aisuggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: calc(var(--stroke-width, 1px)) solid var(--neutral-stroke-rest, rgba(0, 0, 0, 0.15));
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-layer-1, transparent);
    margin-top: 16px;
}

.sc-ui-aisuggestions-title {
    margin: 0 0 16px 0;
    font-size: var(--type-ramp-plus-2-font-size);
    line-height: var(--type-ramp-plus-2-line-height);
    color: var(--neutral-foreground-rest);
}

/* CollapsibleSectionComponent sets padding:0 on its card by design, so the body supplies
   the inset that keeps the text and actions off the card edges. */
.sc-ui-aisuggestion-body {
    padding: 0;
}

.sc-ui-aisuggestion-text {
    width: 100%;
}

    /* The response can be long; keep the body a fixed reading height and scroll inside it. */
    .sc-ui-aisuggestion-text::part(control) {
        overflow-y: auto;
        resize: vertical;
    }

/* Equal-width actions spanning the body, matching the designer's three-up row. */
.sc-ui-aisuggestion-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 12px;
}

    .sc-ui-aisuggestion-actions > fluent-button {
        flex: 1 1 0;
    }
/* Sidebar takeover surface (ISidebar.ShowComponent with Fill). Fluent-token driven so
   Light and Dark both resolve; scrolls internally so long result sets never push the
   sidebar chrome around. */
.sc-ui-sidebar-overlay {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--neutral-layer-1, transparent);
    color: var(--neutral-foreground-rest);
}

/* When the suggestions surface fills the sidebar it carries no outer card chrome of its
   own - the overlay is the surface. */
.sc-ui-sidebar-overlay-content {
    border: none;
    border-radius: 0;
    margin-top: 0;
    flex: 1 1 auto;
}

/* Full-width action footer. Used by the launch (transact) button and by the suggestions
   go-back button, so both read as the same primary, panel-wide action. */
.sc-ui-ai-action-button {
    display: flex;
    margin-top: 12px;
}

    .sc-ui-ai-action-button fluent-button {
        flex: 1 1 auto;
    }

/* Pins the action to the bottom of a fill surface (the sidebar takeover), leaving the
   scrollable content above it. */
.sc-ui-ai-action-button-bottom {
    margin-top: auto;
}