/* 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;
    }

/* Action buttons: a wrapping row with equal spacing. Every button shares the same
   flex basis so buttons on one line are equal width; a line that cannot fit them all
   wraps rather than squeezing labels. A row with a single button stretches full width. */
.sc-ui-aisuggestion-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

    .sc-ui-aisuggestion-actions > fluent-button {
        flex: 1 1 96px;
        min-width: 96px;
    }

/* Feedback stars: a logical row, so RTL reverses the order with no extra rules. */
.sc-ui-aisuggestion-score {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2px;
    margin-top: 8px;
}

    .sc-ui-aisuggestion-score > fluent-button {
        min-width: 0;
        padding: 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;
}

/* A tuning row whose editor pane holds an edited (not yet committed) snapshot tree. The
   raised layer keeps it distinguishable from read-only rows while collapsed. */
.sc-ui-tuning-active fluent-card {
    background: var(--neutral-layer-2);
}

/* Load-count, reload and delete controls above the transaction rows. */
.sc-ui-tuning-page-bar {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    margin-block-end: 12px;
}

/* ----- AI sidebar Upgrade button -----
   Accent button recolored to the usage meter's exhausted color. --sc-upgrade-fill is set
   inline from UsageMeterComponent.EXHAUSTED_COLOR; hover/active darken it. The wrapper
   stretches like the button it holds so the full-width action-button layout is kept.
   ----- */
.sc-ui-ai-upgrade {
    display: contents;
    --accent-fill-rest: var(--sc-upgrade-fill);
    --accent-fill-hover: color-mix(in srgb, var(--sc-upgrade-fill) 90%, black);
    --accent-fill-active: color-mix(in srgb, var(--sc-upgrade-fill) 80%, black);
    --foreground-on-accent-rest: #ffffff;
    --foreground-on-accent-hover: #ffffff;
    --foreground-on-accent-active: #ffffff;
}