/* Settings page — ported from web/app/styles/03-settings.css.
   Settings-only rules; sidebar / conv-item / fn-item rules in the
   legacy file belong elsewhere and are not duplicated here. */

.view {
  /* Decoupled panes: `.view` itself never scrolls. It pins the
     topbar + .body within the viewport; the panes inside .body
     (2nd-level nav, provider list, detail) own their own
     overflow:auto so wheeling one column doesn't drag the others. */
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-secondary);
}

/* Match programs/memory topbar pattern. Plain flex child; .view is
   non-scrolling now so we don't need position:sticky to pin it. */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  height: 64px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-shrink: 0;
  z-index: 10;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-bright);
  flex-shrink: 0;
}

.body {
  /* Body takes the remaining viewport height after the topbar. Each
     column inside it scrolls independently (overflow:auto), so the
     body itself stays a fixed-height grid container. */
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: calc(var(--sidebar-width) - 1px) minmax(0, 1fr);
}

.nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px;
  /* Body row has fixed height now (.view → flex column with .body
     taking the remainder), and .nav owns its column. If the nav list
     ever gets long enough to outrun the viewport, an internal
     scrollbar keeps it self-contained instead of pushing content
     past the viewport bottom. */
  overflow-y: auto;
}
/* List-item standard — mirrors the left sidebar rows (see
   components/sidebar/nav-classes.ts): height --ui-list-h, corner
   --ui-list-radius, 6/8 padding, 12 gap, colour-transition 150ms,
   flat (no border/shadow), hover + active both --bg-hover. Every
   clickable list row in settings follows it. */
.navItem {
  composes: ui-list-item from global;
  color: var(--text-secondary);
  white-space: nowrap;
}
.navItem:hover {
  color: var(--text-primary);
}
.navItem.active {
  color: var(--text-bright);
  background: var(--bg-hover);
}

.content {
  padding: 0;
  border-left: 1px solid var(--border);
  min-width: 0;
  /* Content column fills the body row's height. The .page inside is
     a flex column so its pageHeader is fixed and pageBody takes the
     remainder. */
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ─── Unified page shell ────────────────────────────────────────────────
   Every settings subpage (Providers / Search / Channels / General)
   wraps its content in this same shell so the four pages look like
   siblings — same title position, same description font, same divider,
   same body padding. The shell lives at the top of the content column
   (right of the 2nd-level nav). */
.page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.pageHeader {
  padding: 20px 28px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  /* Fixed header at the top of the content column; pageBody (below)
     gets the remaining vertical room and owns the scroll. */
  flex-shrink: 0;
}
.pageTitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0;
  line-height: 1.3;
}
.pageMeta {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 760px;
  margin: 0;
}
.pageBody {
  /* Single-column variant (Channels / General): own the vertical
     overflow, leave the page-header anchored above. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 28px 32px;
}
/* Two-pane variant: Providers / Search. The two columns inside the
   layout grid scroll INDEPENDENTLY — wheeling over the provider
   list never drags the detail column, and vice versa. The page
   body itself doesn't scroll (overflow: hidden); each column owns
   its own overflow:auto. */
.pageBodyTwoPane {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.section {
  display: flex;
  flex-direction: column;
  /* No outer horizontal padding — sub-columns (.providersLayout) live
     edge-to-edge against the 2nd-level nav. The heading + cards inside
     are indented individually so they don't touch the border. */
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}
.section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Skeleton placeholders shown by `app/(shell)/settings/loading.tsx`
   while the next route's page chunk is being fetched/compiled. The
   shapes mirror `.pageHeader` + `.pageBody` so when the real page
   lands there's no width/height shift. */
.skelTitle {
  width: 180px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  animation: settingsSkelPulse 1.2s ease-in-out infinite;
}
.skelMeta {
  width: 420px;
  max-width: 100%;
  height: 14px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  animation: settingsSkelPulse 1.2s ease-in-out infinite;
}
.skelBlock {
  width: 100%;
  max-width: 720px;
  height: 92px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  animation: settingsSkelPulse 1.2s ease-in-out infinite;
}
.skelBlockShort {
  width: 60%;
  max-width: 480px;
  height: 92px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  animation: settingsSkelPulse 1.2s ease-in-out infinite;
}
@keyframes settingsSkelPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.sectionTitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0;
  /* Lives at the top of providersSidebar (3rd column) which has 8px
     outer padding. With 8 (sidebar) + 8 (title) = 16 above text,
     same as .detail's padding-top 16, the AI Providers heading and the
     4th-level header ("Claude (Max plan)") sit on the same line. */
  padding: 8px;
}

.card {
  /* View is now bg-secondary; cards use bg-tertiary to lift visually.
     No outer margin — the parent (`.pageBody`) supplies horizontal
     padding so the card sits flush with the page-header divider above
     and the page-body's 28px gutters. */
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}
.card + .card {
  margin-top: 12px;
}
/* Section title used inside `.pageBody` — sits 8px above its card so
   the heading reads as the card's label. */
.pageBody .sectionTitle {
  padding: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.row + .row {
  border-top: 1px solid var(--border);
}
/* Top-align variant for rows whose value column is tall (e.g. the
   avatar style picker with its tile grid + variant grid). Centering
   the short left-hand label against that tall block leaves the label
   floating in the middle; this pins it to the top so it reads as the
   heading of the block beside it. A little top padding on the label
   nudges it onto the same baseline as the first row of tiles. */
.rowTop {
  align-items: flex-start;
}
.rowTop .label {
  padding-top: 6px;
}
.label {
  font-size: 14px;
  color: var(--text-primary);
}
.value {
  font-size: 14px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.themeSwitcher {
  display: inline-flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.themeBtn {
  padding: 4px 14px;
  font-size: 14px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font-sans);
}
.themeBtn:hover {
  color: var(--text-primary);
}
.themeBtn.active {
  background: var(--bg-hover);
  color: var(--text-bright);
}

.settingsDropdownWrap {
  position: relative;
  display: inline-block;
}
.settingsDropdownTrigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 6px 8px 6px 12px;
  font-size: var(--fs-base);
  line-height: 20px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.settingsDropdownTrigger:hover {
  background: var(--bg-hover);
}
.settingsDropdownTrigger[aria-expanded="true"] {
  background: var(--bg-hover);
}
.settingsDropdownTrigger svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.settingsDropdownMenu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  box-shadow: var(--shadow-popover);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.settingsDropdownOption {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 6px 10px;
  font-size: var(--fs-base);
  line-height: 20px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.settingsDropdownOption:hover {
  background: var(--bg-hover);
}
.settingsDropdownOptionActive {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.settingsDropdownOptionActive:hover {
  background: var(--bg-hover);
}

/* `.input` — the API-key / base-URL fields are the shadcn <Input> now.
   `.btn` — settings action buttons are the shadcn <Button> now. */

.iconBtn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.iconBtn:hover {
  border-color: var(--accent-blue);
  color: var(--text-bright);
}

/* Providers two-pane layout. Whole settings page scrolls as one
   block (claude.ai-style): no inner overflow, no fixed height — the
   columns grow naturally and the page scrolls them up together.
   The provider list on the left is `position: sticky` so it stays
   in view while the user scans the long model list on the right. */
.providersLayout {
  display: grid;
  grid-template-columns: calc(var(--sidebar-width) - 1px) minmax(0, 1fr);
  /* Fill the page-body's available height so each column gets a
     definite height and can own its own overflow:auto. */
  height: 100%;
  min-height: 0;
}
.providersSidebar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px;
  /* Deep surface — matches the settings page-level background
     (.view + 2nd-level .nav) so the whole left half of the page
     reads as one continuous navigation column. Detail column on
     the right shows through the .content border-left, not via a
     bg shift. See docs/design/surface-system.md. */
  background: var(--bg-secondary);
  /* Own this column's vertical scroll. Decoupled from the right
     detail column — wheeling the list never moves the detail, and
     wheeling the detail never moves the list. */
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--border);
  min-height: 0;
}
/* Search input wrapper at the top of the provider list. Plain
   in-flow block — sidebar no longer has its own scroll, so there's
   nothing for this header to "pin to". */
.providersStickyHeader {
  padding: 0 0 8px;
}
.providersStickyHeader > .providersSearch { margin-top: 0; }
.providersSidebar > .providersGroupLabel { margin-top: 20px; }
/* First group label sits directly under the sticky header — keep
   the gap tight (8px) so the "Enabled" label visually attaches to
   the search box above. Later group breaks ("Not enabled") get the
   larger 20px margin from the rule above. */
.providersStickyHeader + .providersGroupLabel { margin-top: 8px; }
.providersSearch {
  position: relative;
}
.providersSearch input {
  width: 100%;
  height: var(--ui-button-h);
  padding: 0 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--ui-button-radius);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
}
.providersSearch input:focus {
  border-color: var(--accent-blue);
}
.providersSearch input::placeholder {
  color: var(--text-muted);
}
.providersGroupLabel {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 8px;
  padding: 0 8px;
}
.providerItem {
  composes: ui-list-item from global;
}
.providerItem.active {
  background: var(--bg-hover);
}
.providerIcon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Tinted plate so mono (black) brand SVGs stay visible on dark
   * theme. Subtle in light mode, slightly stronger in dark mode.
   * Brand-color SVGs sit on top fine — the plate just adds a small
   * frame. */
  background: var(--bg-tertiary);
  border-radius: 6px;
  padding: 2px;
  box-sizing: border-box;
}
.providerIcon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Dark theme: lighter plate so black/mono SVGs read clearly.
 * --bg-tertiary in dark mode is too close to bg-primary. */
:global([data-theme="dark"]) .providerIcon {
  background: rgba(255, 255, 255, 0.08);
}
.providerIconLetter {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 600;
}
.providerLabel {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  font-size: 14px;
}
.providerDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.providerDot.on {
  background: var(--accent-green);
}
.providerDot.off {
  background: var(--text-muted);
}
.providerDot.unconfigured {
  background: transparent;
  border: 1px solid var(--text-muted);
}

/* "Default" pill next to the provider label in the search-providers
   list. Subtle so it doesn't compete with the status dot, but bright
   enough to read at a glance. */
.providerDefaultBadge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-blue-bg, rgba(79, 142, 247, 0.16));
  color: var(--accent-blue, #4f8ef7);
  flex-shrink: 0;
}

.detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px 20px;
  /* Detail column owns its own scroll — wheeling here doesn't move
     the provider list on the left. */
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
.detailEmpty {
  color: var(--text-muted);
  padding: 32px 0;
  text-align: center;
}
.detailHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.detailIcon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detailIcon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detailTitleWrap {
  flex: 1;
  min-width: 0;
}
.detailTitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-bright);
}
.detailSubtitle {
  font-size: 14px;
  color: var(--text-muted);
}
.detailSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detailSectionTitle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.detailRow {
  display: flex;
  gap: 10px;
  align-items: center;
}
/* A control that only appears when its row is hovered (e.g. the rename pencil),
   so rows stay clean until you reach for it. */
.detailRow .hoverShow {
  opacity: 0;
  transition: opacity 120ms ease;
}
.detailRow:hover .hoverShow {
  opacity: 0.7;
}

/* ── Account row — ONE fixed-column grid for every provider type ───────────
   The right-hand controls (status · Validate · active · Remove) sit in
   fixed-width columns so they stay aligned and NEVER reflow when a button's
   label changes (Activate ⇄ Activated ⇄ Deactivate). The left content area
   (drag · name · key) flexes. */
.acctRow {
  display: grid;
  /* drag · content · status · [Validate · active · Remove] — the three
     action buttons share ONE width so the row reads as an even rail and
     no single button (the active toggle used to be 104px) bulges out. */
  grid-template-columns: 16px minmax(0, 1fr) 66px 88px 88px 88px;
  align-items: center;
  gap: 8px;
  /* Vertical padding only: the picked-up row's grey background (whileDrag)
     reads as ONE rounded block that's a touch taller than the controls, so
     it encloses the whole row instead of hugging the text. No horizontal
     padding / margin, so the block's left+right edges line up with the rest
     of the panel's content (the add-key row, the API-base input, the section
     title) — same side margin as everything else, not jutting out. */
  padding: 5px 0;
  /* A drag must not turn into a text selection of the name / key / labels. */
  user-select: none;
}
/* …but the key field is still a real input you can select inside. */
.acctRow input { user-select: text; }
.acctContent {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.acctName {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 5rem;
  flex-shrink: 0;
}
.acctNameText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text-primary);
}
.acctKey {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dragHandle {
  color: var(--text-muted);
  cursor: grab;
  opacity: 0.45;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dragHandle:hover { opacity: 0.9; }
/* status badge — same pill language as the "DEFAULT" provider badge and
   the branch "HEAD" badge: tiny bold uppercase text on a tinted ground,
   the tint carrying the semantic colour (green / yellow / red). It hugs
   its label and centres in the status cell; an over-long status (e.g.
   NEEDS_REAUTH) caps at the cell width and ellipsises. */
.statusBadge {
  justify-self: center;
  max-width: 100%;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
.statusBadge.valid { color: var(--accent-green); background: color-mix(in srgb, var(--accent-green) 18%, transparent); }
.statusBadge.warn { color: var(--accent-yellow); background: color-mix(in srgb, var(--accent-yellow) 20%, transparent); }
.statusBadge.error { color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 18%, transparent); }
.statusChecking {
  justify-self: center;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
/* each right-hand control fills its fixed grid cell, so its width is
   constant. Compact type + tight padding keeps these row buttons from
   looking bulky against the dense row. */
.acctCellBtn {
  width: 100%;
  font-size: 12px;
  padding-left: 8px;
  padding-right: 8px;
}
.detailRow > .input {
  flex: 1;
  width: auto;
}
.modelCountSummary {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

/* Toggle switch — the provider / model enable toggles are the shadcn
   <Switch> component now. */

/* Model list — no inner scroll. The whole settings page is a single
   scroll root (`.view`); the model list grows naturally and rides
   the page scroll. Earlier `max-height: 480px; overflow-y: auto`
   trapped the wheel inside the list so the rest of the page only
   moved after large gestures past the model list's end. */
.modelList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}
.modelItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  /* 2-line (name + id) toggle row — stays boxed, but its corner matches
     the list standard so it doesn't read as a third radius. */
  border-radius: var(--ui-list-radius);
  border: 1px solid var(--border);
  background: var(--bg-input);
}
.modelItemIcon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.modelItemInfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.modelItemName {
  font-size: 14px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modelItemId {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modelCapabilities {
  display: flex;
  gap: 4px;
}
.capBadge {
  width: 22px;
  height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 12px;
}
.capBadge.vision {
  color: var(--accent-cyan, #56b6c2);
}
.capBadge.video {
  color: var(--accent-blue, #4d9fe8);
}
.capBadge.tools {
  color: var(--accent-green);
}
.capBadge.reasoning {
  color: var(--accent-purple);
}
.capBadge.ctx {
  color: var(--text-secondary);
  width: auto;
  padding: 0 6px;
  font-family: var(--font-mono);
}
.modelSearch {
  margin-bottom: 8px;
}
.modelSearch input {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--ui-button-radius);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
}
/* `.miniAction` — fetch / bulk-toggle buttons are the shadcn
   <Button variant="outline" size="sm"> now. */

/* Test result */
.testResult {
  font-size: 12px;
  padding: 0 6px;
  border-radius: 4px;
}
.testResult.ok {
  color: var(--accent-green);
}
.testResult.err {
  color: var(--accent-red);
}

/* Search-provider tier chip — sits next to the detail-panel title so
   "Free 1000 q/mo" / "Pay-as-you-go" / "Self-hosted" is visible at a
   glance without making the user read the description prose. Muted
   surface to stay below the default-pill in visual hierarchy. */
.searchTierChip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  margin-left: 8px;
  vertical-align: middle;
  flex-shrink: 0;
  white-space: nowrap;
}

/* "Get API key →" button + numbered setup steps for search providers.
   Idle = ``bg-hover`` chip one shade brighter than the surrounding
   ``bg-tertiary`` description box, with ``text-primary`` for the
   label — readable as a button without competing for attention.
   The amber accent only emerges on hover, matching the rest of the
   product's idle-neutral / colored-on-hover button philosophy. The
   solid orange + white-text version this replaced was the loudest
   chip on /settings; on a Claude-style warm-neutral page the user
   flagged it as visually jarring. */
.searchSetupGetKey {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.searchSetupGetKey:hover {
  background: color-mix(in srgb, var(--accent-orange) 18%, transparent);
  color: var(--accent-orange);
  border-color: color-mix(in srgb, var(--accent-orange) 30%, transparent);
}

/* "Set as default" pin-this-as-default action on each search /
   provider card. Same idle-neutral / amber-on-hover pattern as
   ``.searchSetupGetKey`` above — was a solid orange + white-text
   block, the loudest control on /settings. Two states:
     - default (idle, clickable): bg-hover chip + bordered, amber
       on hover
     - already-default (terminal): bg-tertiary chip + muted text,
       no hover affordance because there's nothing to do */
.setDefaultBtn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.setDefaultBtn:hover:not(:disabled):not(.setDefaultActive) {
  background: color-mix(in srgb, var(--accent-orange) 18%, transparent);
  color: var(--accent-orange);
  border-color: color-mix(in srgb, var(--accent-orange) 30%, transparent);
}
.setDefaultBtn:disabled {
  opacity: 0.5;
  cursor: default;
}
.setDefaultBtn.setDefaultActive {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: default;
}
.searchSetupSteps {
  margin: 4px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}
.searchSetupSteps li {
  padding-left: 2px;
}
