@genesislcap/ai-assistant 15.19.0 → 15.19.1

package/src/components/settings-modal/settings-modal.styles.ts

@@ -1,853 +0,0 @@
-import { css } from '@genesislcap/web-core';
-import { assistantSettingsSectionTitleStyles } from '../../styles/settings-section';
-
-/** Styles for the assistant settings modal (tabs, sections, toggles, cost summary). */
-export const settingsModalStyles = css`
-  /*
-   * Section headings come from the shared fragment the package also exports, so a host titling
-   * its own slotted section applies the same rule rather than a copy of it.
-   */
-  ${assistantSettingsSectionTitleStyles}
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  .settings-modal {
-    --ai-tier-badge-bg-mix: 14%;
-    --ai-tier-badge-text-lighten: 18%;
-  }
-
-  .settings-modal::part(dialog) {
-    max-width: 620px;
-    width: calc(100vw - 48px);
-    max-height: calc(100vh - 48px);
-    padding: 0;
-  }
-
-  .settings-modal::part(content) {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    padding: 0;
-    width: 100%;
-  }
-
-  .settings-modal::part(top) {
-    padding: calc(var(--design-unit) * 4px) calc(var(--design-unit) * 5px);
-    border-bottom: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .settings-modal::part(bottom) {
-    padding: calc(var(--design-unit) * 4px) calc(var(--design-unit) * 5px);
-    border-top: 1px solid var(--neutral-stroke-rest);
-    border-bottom-left-radius: var(--card-border-radius, calc(var(--control-corner-radius) * 1px));
-    border-bottom-right-radius: var(--card-border-radius, calc(var(--control-corner-radius) * 1px));
-    background-color: var(--neutral-layer-2);
-  }
-
-  .settings-modal-header {
-    display: flex;
-    align-items: center;
-    min-width: 0;
-  }
-
-  .settings-modal-title {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit) * 2px);
-    color: var(--neutral-foreground-rest);
-  }
-
-  .settings-modal-content {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    flex: 1 1 auto;
-  }
-
-  .settings-modal-tabs::part(tablist) {
-    border-bottom: 0;
-    padding: 0 calc(var(--design-unit) * 5px);
-    column-gap: calc(var(--design-unit) * 5px);
-  }
-
-  .settings-modal-tabs::part(activeIndicator) {
-    height: 2px;
-  }
-
-  .settings-modal-tab {
-    padding: 0;
-    font-weight: 600;
-    gap: 6px;
-  }
-
-  .settings-modal-tab[aria-selected='true'] {
-    color: var(--neutral-foreground-rest);
-  }
-
-  .settings-modal-tabs::part(tabpanel) {
-    border-top: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .settings-modal-tab-panel {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    flex: 1 1 auto;
-    padding: 0;
-    border-radius: 0;
-  }
-
-  .settings-modal-tab-panel[hidden] {
-    display: none !important;
-  }
-
-  .settings-modal-body {
-    overflow-y: auto;
-    padding: 0 calc(var(--design-unit) * 5px) calc(var(--design-unit) * 2px);
-    max-height: min(60vh, 520px);
-  }
-
-  .settings-modal-section {
-    padding: calc(var(--design-unit) * 5px) 0;
-    border-bottom: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .settings-modal-section:last-child {
-    border-bottom: none;
-  }
-
-  /*
-   * Only the spacing. Everything else about this heading comes from the exported fragment
-   * above, which the assistant and its hosts share; margin is deliberately not in there,
-   * since the gap below a heading depends on the layout around it.
-   */
-  .ai-settings-section-title {
-    margin: 0 0 calc(var(--design-unit) * 3px);
-  }
-
-  .settings-modal-section-note {
-    margin: calc(var(--design-unit) * -2px) 0 calc(var(--design-unit) * 3px);
-    font-size: 12px;
-    line-height: 1.5;
-    color: var(--neutral-foreground-hint);
-  }
-
-  .settings-modal-section-body {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 4px);
-  }
-
-  .settings-toggle-row {
-    display: flex;
-    align-items: flex-start;
-    gap: calc(var(--design-unit) * 3px);
-    padding: 0 0 calc(var(--design-unit) * 4px) 0;
-    border-bottom: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .settings-toggle-row:last-child {
-    border-bottom: none;
-    padding-bottom: calc(var(--design-unit) * 1px);
-  }
-
-  .settings-toggle-row.is-stacked {
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 2px);
-  }
-
-  /*
-   * For rows whose control is a button rather than a switch. The base row top-aligns, which suits
-   * a switch (it lands level with the title), but a button is tall enough that top-aligning leaves
-   * it above the title-plus-description block it acts on.
-   */
-  .settings-toggle-row.is-centered {
-    align-items: center;
-  }
-
-  .settings-animation-list {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: calc(var(--control-corner-radius) * 1.2px);
-    padding: calc(var(--design-unit) * 2px);
-    gap: calc(var(--design-unit) * 2px);
-  }
-
-  .settings-animation-list .settings-toggle-row {
-    border: 0;
-  }
-
-  .settings-animation-category {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 4px);
-  }
-
-  .settings-animation-category-label {
-    font-weight: 600;
-    color: var(--neutral-foreground-hint);
-  }
-
-  .settings-toggle-row + .settings-animation-category-label {
-    border-top: 1px solid var(--neutral-stroke-rest);
-    padding-top: calc(var(--design-unit) * 2px);
-  }
-
-  .settings-animation-option {
-    padding: 0;
-    margin: 0;
-  }
-
-  .settings-animation-option:last-child {
-    border-bottom: none;
-    padding-bottom: calc(var(--design-unit) * 2px);
-  }
-
-  .settings-toggle-text {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .settings-toggle-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--neutral-foreground-rest);
-  }
-
-  .settings-toggle-desc {
-    font-size: 12px;
-    color: var(--neutral-foreground-hint);
-    line-height: 1.5;
-    max-width: 92%;
-  }
-
-  .settings-toggle-control {
-    flex: 0 0 auto;
-    min-width: 0;
-  }
-
-  .settings-toggle-control-wide {
-    width: 100%;
-    max-width: 280px;
-  }
-
-  .settings-toggle-row.is-stacked .settings-toggle-desc {
-    max-width: none;
-  }
-
-  .settings-toggle-row.is-stacked .settings-toggle-control-wide {
-    width: 100%;
-    max-width: none;
-  }
-
-  /*
-   * Sub-heading over the provider toggle group. Unlike the section headings it sits INSIDE
-   * .settings-modal-section-body, so the parent's 4-unit flex gap already separates it from the
-   * first toggle — and flex does not collapse margins, so the shared rule's 3-unit margin-bottom
-   * would add to that gap rather than replace it, leaving the label adrift from the rows it
-   * names. Zero the margin and pull back 2 of the 4 gap units, expressed in the same token so it
-   * tracks if that gap changes.
-   */
-  .settings-app-toggles-title {
-    margin: 0 0 calc(var(--design-unit) * -2px);
-  }
-
-  .settings-app-toggle-block {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 1px);
-  }
-
-  .settings-toggle-hint {
-    font-size: 12px;
-    color: var(--neutral-foreground-hint);
-    line-height: 1.4;
-    padding-left: calc(var(--design-unit) * 1px);
-    font-style: italic;
-  }
-
-  /*
-   * The budget meter (GENC-1464) is the context indicator's money sibling and
-   * shares its row anatomy 1:1, so the budget classes JOIN these rules rather
-   * than restating them — one place to restyle the header/label/figures shape,
-   * and the two indicators cannot drift apart. Design-system tokens only, and
-   * unfallbacked: every token here ships a DS default, so a var(--x, y)
-   * fallback would be dead code that hides a broken token name (#2411/#2436
-   * review rule, pinned by settings-modal.styles.test.ts).
-   */
-  .settings-context-header,
-  .settings-budget-header {
-    display: flex;
-    justify-content: space-between;
-    gap: calc(var(--design-unit) * 2px);
-    margin-bottom: calc(var(--design-unit) * 2px);
-    font-size: 12px;
-  }
-
-  .settings-context-label,
-  .settings-budget-label {
-    color: var(--neutral-foreground-hint);
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-  }
-
-  .settings-context-tokens,
-  .settings-budget-figures {
-    color: var(--neutral-foreground-rest);
-  }
-
-  /* Freshness footer (GENC-1464): refresh button + label under the vendor
-     rows, left-aligned — a footnote to the figures above it. The button's
-     inline padding is pinned and cancelled by the container margin so the
-     ICON GLYPH (not the button box) sits flush with the budget labels'
-     left edge, whatever the density tokens say. */
-  .settings-budget-toolbar {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 4px;
-    margin-inline-start: -4px;
-  }
-
-  .settings-budget-refresh::part(control) {
-    padding-inline: 4px;
-  }
-
-  .settings-budget-updated {
-    color: var(--neutral-foreground-hint);
-    font-size: 11px;
-  }
-
-  /*
-   * ONE rhythm for every meter row. The outer wrapper holds the context
-   * indicator and the budget meter; the inner one holds the budget meter's
-   * vendor rows — and both gap by the same 2 units (half the section body's 4)
-   * so that visually identical meter rows are evenly spaced whatever mix of
-   * them is on screen. Without the wrapper the context row inherits the body's
-   * 4-unit gap while the vendor rows keep 2, and three identical-looking rows
-   * read as an uneven 4/2/2. The wrapper renders only when at least one meter
-   * does — see settingsUsageMetersTemplate for why an always-on one would cost
-   * a stray gap.
-   */
-  .settings-usage-meters,
-  .settings-budget-usage {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 2px);
-  }
-
-  .settings-current-build,
-  .settings-lifetime-usage {
-    background: var(--neutral-layer-2);
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: calc(var(--control-corner-radius) * 1.5px);
-    padding: calc(var(--design-unit) * 4px);
-    margin: calc(var(--design-unit) * 3px) 0;
-  }
-
-  /*
-   * Deliberately quieter than the live block: no pulsing badge and no accent, so the eye lands
-   * on what is being built now — which is why that block leads the tab and this one follows,
-   * under the history heading whose rows it totals.
-   */
-  .settings-lifetime-usage-top {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: calc(var(--design-unit) * 2px);
-    margin-bottom: calc(var(--design-unit) * 3px);
-  }
-
-  .settings-lifetime-label {
-    font-size: 10px;
-    line-height: 1;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--neutral-foreground-hint);
-  }
-
-  .settings-current-build-top {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: calc(var(--design-unit) * 2px);
-    margin-bottom: calc(var(--design-unit) * 3px);
-  }
-
-  /*
-   * Optically centring these 10px caps against the 14px project name beside them. Flex offers
-   * only two alignments and neither lands it, because a box centre and a text baseline are
-   * different lines:
-   *   - align-items: center   sits the badge baseline about 1.2px high
-   *   - align-items: baseline matches baselines, but the caps then read as bottom-aligned
-   *     against the name's ascenders, so the badge looks low
-   * The eye wants the midpoint, so: centre the boxes, then translate down by the ~1px of
-   * overshoot. This is a nudge, but it corrects a fixed relationship between two font sizes
-   * rather than some neighbouring element's layout, so unlike a margin tuned to a sibling it
-   * cannot rot when that sibling changes. In em, so it tracks the badge text.
-   *
-   * display: block, not inline-flex: a flex container has no text baseline of its own and
-   * synthesizes one from its first child, which here is the dot, an empty span. As a block box
-   * the badge takes the baseline of its first line, i.e. the text.
-   */
-  .settings-live-badge {
-    display: block;
-    font-size: 10px;
-    line-height: 1;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--accent-fill-rest);
-    white-space: nowrap;
-    transform: translateY(0.1em);
-  }
-
-  .settings-live-dot {
-    display: inline-block;
-    width: 7px;
-    height: 7px;
-
-    /* Replaces the flex gap the badge no longer has. */
-    margin-right: calc(var(--design-unit) * 1px);
-
-    /* Centres the dot on the text beside it without disturbing that text's baseline. */
-    vertical-align: middle;
-    border-radius: 50%;
-    background: var(--accent-fill-rest);
-    animation: settings-live-pulse 1.6s ease-out infinite;
-  }
-
-  @keyframes settings-live-pulse {
-    0% {
-      box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-fill-rest) 55%, transparent);
-    }
-
-    70% {
-      box-shadow: 0 0 0 7px transparent;
-    }
-
-    100% {
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-
-  .settings-current-build-name {
-    font-size: 14px;
-    line-height: 1;
-    font-weight: 600;
-  }
-
-  /*
-   * Cost and the token buckets side by side: one number in its own box, the four buckets
-   * sharing the box next to it. Stretch, so the two are the same height however tall the 22px
-   * cost value makes the left one.
-   */
-  .settings-usage-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: stretch;
-    gap: calc(var(--design-unit) * 3px);
-    margin-bottom: calc(var(--design-unit) * 3px);
-  }
-
-  .settings-usage-row-tokens {
-    display: flex;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  .settings-build-stat {
-    min-width: 0;
-    background: var(--neutral-layer-1);
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: calc(var(--control-corner-radius) * 1px);
-    padding: calc(var(--design-unit) * 3px);
-  }
-
-  .settings-build-stat-label {
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--neutral-foreground-hint);
-  }
-
-  .settings-build-stat-value {
-    font-size: 22px;
-    font-weight: 700;
-    margin-top: calc(var(--design-unit) * 1px);
-    color: var(--neutral-foreground-rest);
-  }
-
-  .settings-build-stat-value .prefix,
-  .settings-build-stat-value .suffix {
-    color: var(--accent-fill-rest);
-  }
-
-  /*
-   * Per-bucket token split, beneath the headline cost. Small paired label/value cells
-   * rather than four more stat cards: they are the detail behind the cost above, so they
-   * have to read as subordinate to it rather than compete with it. The four buckets ARE
-   * the token figure now — there is no merged total anywhere for them to break down.
-   */
-  .settings-token-breakdown {
-    display: flex;
-    flex-direction: column;
-
-    /*
-     * Tight against the buckets below. One design unit rather than two, because each bucket
-     * separates its own label from its value by only 2px — at two units the title sat four
-     * times further from the bucket labels than they sit from their own numbers, which read
-     * as a gap between unrelated blocks instead of a heading over its content.
-     */
-    gap: calc(var(--design-unit) * 1px);
-    margin-bottom: calc(var(--design-unit) * 3px);
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
-    background: var(--neutral-layer-1);
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: calc(var(--control-corner-radius) * 1px);
-  }
-
-  /*
-   * Titles the box, because nothing else in it named the unit. Same styling and position as
-   * the cost box's label, so two boxes sitting side by side are titled the same way; the
-   * hierarchy against the bucket labels comes from position, not a second type size.
-   */
-  .settings-token-breakdown-label {
-    font-size: 10px;
-    line-height: 1;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--neutral-foreground-hint);
-  }
-
-  .settings-token-buckets {
-    display: flex;
-    flex-wrap: wrap;
-    gap: calc(var(--design-unit) * 4px);
-  }
-
-  .settings-token-bucket {
-    display: flex;
-
-    /*
-     * min-content (not 0) so a bucket cannot be shrunk narrower than its own unbreakable label.
-     * With the label set to nowrap, a zero minimum would overflow it into the next column instead
-     * of wrapping — so the container's flex-wrap takes over and moves a bucket to a second row,
-     * which is the degradation we want when the modal is dragged narrow.
-     */
-    min-width: min-content;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .settings-token-bucket-label {
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--neutral-foreground-hint);
-
-    /*
-     * One line, always. The rate marker is a separate inline box after collapsible whitespace, so
-     * a wrappable label gives it a break opportunity of its own — in a narrow column it orphaned
-     * onto line 2, which also pushed that bucket's value a line below the other three and broke
-     * the row of figures. nowrap removes every break opportunity in the label, the space before
-     * the marker included, so no glue character is needed.
-     */
-    white-space: nowrap;
-  }
-
-  .settings-token-bucket-value {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--neutral-foreground-rest);
-  }
-
-  /*
-   * The price-direction marker on a cache bucket's label — down for reads (a fraction of the
-   * uncached input rate), up for writes (a premium over it). Three tiers, so a bucket with no
-   * marker is the reference rate rather than an unlabelled fourth case.
-   *
-   * Carried by the label rather than the value, which is what this used to do: cache reads are
-   * usually the largest bucket by a wide margin in an agentic session, so the value was muted to
-   * stop the biggest number reading as the dominant cost driver. That priced the treatment to the
-   * wrong thing — a dimmed 0 (every Gemini cache write) looked disabled next to a normal 0, and a
-   * rate is a property of the bucket, not of this turn's figure.
-   *
-   * Sized down and nudged up rather than tinted: the label is already the hint colour, so a
-   * dimmer marker would vanish and a brighter one would out-shout the word it qualifies.
-   */
-  .settings-token-bucket-rate {
-    font-size: 8px;
-    line-height: 1;
-    vertical-align: 0.15em;
-    letter-spacing: 0;
-  }
-
-  /*
-   * Usage-row overrides. Placed after the base rules they refine rather than up beside
-   * .settings-usage-row itself, because stylelint's no-descending-specificity rejects a
-   * compound selector appearing before the plain one it overrides.
-   */
-
-  /* Sized by its content; the buckets take the rest, since four cells need the width. */
-  .settings-usage-row > .settings-build-stat {
-    flex: 0 1 auto;
-  }
-
-  .settings-usage-row .settings-token-breakdown {
-    flex: 1 1 auto;
-
-    /* The row owns the spacing now; this centres the column against the taller cost box. */
-    justify-content: center;
-    margin-bottom: 0;
-  }
-
-  /*
-   * Basis auto, not 0: a zero basis splits the row into four equal columns, so CACHE WRITE is
-   * squeezed exactly as hard as INPUT despite being twice the label. Sizing from content gives the
-   * long labels the room their text needs and lets the short ones concede it, which is what makes
-   * white-space: nowrap above safe — every column starts at least as wide as its own content,
-   * then shares the slack. Still grows and shrinks, so the four stay flush edge to edge.
-   */
-  .settings-usage-row .settings-token-bucket {
-    flex: 1 1 auto;
-  }
-
-  .settings-model-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: calc(var(--design-unit) * 2px);
-  }
-
-  .settings-model-tag {
-    font-size: 11px;
-    font-weight: 600;
-    padding: 3px 9px;
-    border-radius: 20px;
-    font-family: ui-monospace, monospace;
-    border: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .settings-model-tag,
-  .settings-cost-history-icon {
-    --model-tag-color: var(--neutral-foreground-rest);
-
-    background: color-mix(
-      in srgb,
-      var(--model-tag-color) var(--ai-tier-badge-bg-mix),
-      var(--neutral-layer-1)
-    );
-    border-color: color-mix(in srgb, var(--model-tag-color) 20%, var(--neutral-layer-1));
-    color: color-mix(in srgb, var(--model-tag-color), white var(--ai-tier-badge-text-lighten));
-  }
-
-  .settings-cost-history-title {
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--neutral-foreground-hint);
-    font-weight: 600;
-    margin: calc(var(--design-unit) * 4px) 0 calc(var(--design-unit) * 2px);
-  }
-
-  /*
-   * The heading labels the lifetime card as well as the rows, so the card gives up its own top
-   * margin and the gap becomes the heading's alone. Adjacent siblings collapse to the LARGER of
-   * the two margins, so leaving both would space the caps 3 units off the block they label while
-   * the rows below sit at 2 — reading as though the heading belonged to neither.
-   */
-  .settings-cost-history-title + .settings-lifetime-usage {
-    margin-top: 0;
-  }
-
-  .settings-cost-history {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 2px);
-    padding-bottom: calc(var(--design-unit) * 2px);
-  }
-
-  .settings-cost-history-icon {
-    flex: 0 0 auto;
-    width: 36px;
-    height: 36px;
-    border-radius: calc(var(--control-corner-radius) * 1px);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    font-weight: 700;
-    border: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .settings-cost-history-row {
-    display: flex;
-    flex-direction: column;
-    background: var(--neutral-layer-1);
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: calc(var(--control-corner-radius) * 1.5px);
-    padding: calc(var(--design-unit) * 4px);
-  }
-
-  .settings-cost-history-row-content {
-    display: flex;
-    align-items: flex-start;
-    gap: calc(var(--design-unit) * 2px);
-  }
-
-  /*
-   * All of these carry a ?hidden binding, and all declare display: flex — which silently beat the
-   * UA [hidden] { display: none } rule, because author-origin declarations outrank user-agent
-   * origin whatever the specificity. Without this, showTokens: false still rendered the full
-   * breakdown in the lifetime block, the live block and every history row, and an empty row list
-   * still occupied its padding under the lifetime total. Sibling elements that hide correctly do
-   * so only by declaring no display at all. Same treatment as .settings-modal-tab-panel[hidden]
-   * near the top of this file.
-   */
-  .settings-usage-row-tokens[hidden],
-  .settings-cost-history[hidden],
-  .settings-cost-history-row-content[hidden] {
-    display: none !important;
-  }
-
-  /*
-   * The buckets inside a history row drop the panel treatment they carry in the summary
-   * blocks — the row is already a bordered card, and a second box inside it reads as a
-   * nested panel. The adjacent-sibling rule above supplies the separator instead.
-   */
-  .settings-cost-history-row-breakdown .settings-token-breakdown {
-    flex: 1 1 auto;
-    margin-bottom: 0;
-    padding: 0;
-    background: none;
-    border: none;
-  }
-
-  .settings-cost-history-row-content + .settings-cost-history-row-content {
-    border-top: 1px solid var(--neutral-stroke-rest);
-    margin-top: calc(var(--design-unit) * 2px);
-    padding-top: calc(var(--design-unit) * 2px);
-  }
-
-  .settings-cost-history-row-body {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    gap: calc(var(--design-unit) * 2px);
-    justify-content: space-between;
-  }
-
-  /*
-   * Holds the cost and the delete button as one centred pair. The button used to be a sibling
-   * of the whole row body, kept in place by a -2px nudge tuned for when the metrics column had
-   * two lines (cost plus a merged token total). Dropping that second line left the nudge
-   * compensating for nothing. Centring the two against each other needs no magic number and
-   * cannot drift again if the metrics content changes.
-   *
-   * NB this rule previously set align-items with no display:flex, so it had no effect at all.
-   */
-  .settings-cost-history-row-right {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit) * 1px);
-    flex: 0 0 auto;
-  }
-
-  .settings-cost-history-row-cost,
-  .settings-cost-history-row-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--neutral-foreground-rest);
-    min-width: 0;
-  }
-
-  .settings-cost-history-row-metrics {
-    display: flex;
-    flex-direction: column;
-    flex: 0 0 auto;
-    font-size: 13px;
-    font-family: ui-monospace, monospace;
-    color: var(--neutral-foreground-rest);
-    white-space: nowrap;
-  }
-
-  .settings-cost-history-row-date {
-    font-size: 12px;
-    color: var(--neutral-foreground-hint);
-  }
-
-  .settings-cost-history-delete {
-    flex: 0 0 auto;
-    color: var(--neutral-foreground-hint);
-  }
-
-  .settings-cost-history-delete:hover {
-    color: var(--error-color);
-  }
-
-  .settings-cost-history ::slotted(*) {
-    display: block;
-  }
-
-  .settings-modal-footer {
-    width: 100%;
-  }
-
-  .settings-done-button {
-    margin-left: auto;
-  }
-
-  .settings-modal-footer-actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: calc(var(--design-unit) * 2px);
-    width: 100%;
-  }
-
-  .settings-disclaimer {
-    font-size: 12px;
-    color: var(--neutral-foreground-hint);
-    max-width: 60%;
-    line-height: 1.4;
-  }
-
-  /*
-   * Inline spinner shown in the "Download agent log" button while the log builds
-   * (GENC-1351 §5.8) — the lifetime-stitch path is an async provider round-trip.
-   * Sized to the button label and tinted with currentColor so it tracks the
-   * button's text colour in every appearance / theme.
-   */
-  [part='download-button'] .download-spinner {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    margin-right: calc(var(--design-unit) * 1px);
-    vertical-align: -1px;
-    border: 2px solid currentColor;
-    border-right-color: transparent;
-    border-radius: 50%;
-    animation: download-spin 0.6s linear infinite;
-  }
-
-  @keyframes download-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;