apps/desktop/src/renderer/styles/settings/bot.css

/* Astryx convergence: the pre-#1972 remote-access dialect is retired — page
   containers → SettingsPage, section headers → SettingsSection, the runtime
   tinted card + <dl> status grid → SettingsSection + MetadataList, the
   quick-setup plate → Astryx Card, list grids → the kit's rows body. What
   stays below is genuine art (brand plate, QR frames, onboarding glyphs) and
   the row-level behaviors (attention wash, planned opacity). */

.settingsBotLogo {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.settingsBotLogo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.settingsBotLogo[data-large="true"] {
  width: 44px;
  height: 44px;
}

.settingsRemoteAccessChannelRow,
.settingsRemoteAccessCatalogRow {
  min-height: 64px;
  min-width: 0;
  gap: var(--space-3);
  /* Deep-review fix: flush inline — kit rows edge-align with the section
     heading; the 10px inset was a leftover from the old card grid. */
  padding: var(--space-2) 0;
}

.settingsRemoteAccessItemTitle {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.settingsRemoteAccessItemDescription {
  overflow-wrap: anywhere;
}

.settingsRemoteAccessChannelRow[data-attention="true"] {
  background: var(--warning-wash);
}

.settingsRemoteAccessItemActions {
  display: flex;
  color: var(--muted-foreground);
}

.settingsRemoteAccessCatalogRow[data-support="planned"] {
  opacity: var(--opacity-muted);
}

.settingsRemoteAccessBack {
  /* Deep-review fix: the page gap owns vertical rhythm now; only the optical
     inline outdent stays so the ghost button's label aligns with content. */
  justify-self: start;
  margin-inline-start: calc(var(--space-2) * -1);
}


.settingsBotDetailHeader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: 0 var(--space-1);
}

.settingsBotDetailHeaderBody {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.settingsBotDetailHeader > .settingsBotLogo {
  grid-column: 1;
  grid-row: 1;
}

.settingsBotDetailHeader > .settingsBotDetailSwitch {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.settingsBotDetailHeader h3 {
  font: var(--maka-text-heading-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  color: var(--foreground);
}

.settingsBotDetailHeader p {
  font: var(--maka-text-body);
  margin: 0;
  color: var(--foreground-secondary);
}

.settingsBotEnableHint {
  font: var(--maka-text-supporting);
  display: block;
  margin-top: var(--space-1);
  color: var(--warning-text, var(--foreground-secondary));
}

.settingsBotConfigDocLink {
  font: var(--maka-text-label);
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
}
.settingsBotConfigDocLink:hover {
  text-decoration: underline;
}

.settingsBotConfigDocLink:focus-visible {
  text-decoration: underline;
}

/* At the restored/sanitized 480px window floor, the fixed Settings navigation
   leaves a narrow content column. Keep provider summaries readable instead of
   squeezing the logo, title, status chip, and switch into one row. */
@media (max-width: 620px) {
  .settingsBotDetailHeader {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .settingsBotDetailHeaderBody {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .settingsBotConfigDocLink {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .settingsRemoteAccessChannelRow,
  .settingsRemoteAccessCatalogRow {
    gap: var(--space-2);
  }

  /* The whole row remains the named button. In the narrow layout, dropping
     the redundant chevron leaves enough room for the provider name, status
     chip, and a useful diagnostic summary. */
  .settingsRemoteAccessItemActions {
    display: none;
  }
}

.settingsBotActionStack {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.settingsBotSetupModes,
.settingsBotBrandChoice {
  justify-self: start;
}

.settingsBotOnboardingBody {
  display: grid;
  justify-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-6) var(--space-5);
}

.settingsBotOnboardingQrFrame {
  display: grid;
  /* Shared with the WeChat QR login frame (settings/wechat.css): both read
     --qr-frame-size so the paired dialogs present one QR spec. */
  width: var(--qr-frame-size);
  height: var(--qr-frame-size);
  place-items: center;
  overflow: hidden;
  border: var(--border-width-hairline) solid var(--border);
  border-radius: var(--radius-surface);
  /* Paper, not a ladder tier: a QR code has to stay dark-on-light to be
     scannable at all. See --surface-paper in maka-tokens.css. */
  background: var(--surface-paper);
  padding: var(--space-3);
}

.settingsBotOnboardingQrFrame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.settingsBotOnboardingQrFrame[data-state="starting"],
.settingsBotOnboardingQrFrame[data-state="connecting"] {
  color: var(--foreground-secondary);
  background: var(--foreground-3);
}

.settingsBotOnboardingSuccess,
.settingsBotOnboardingEmpty {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  /* Pill, not --radius-plate: a status circle is a circle. */
  border-radius: var(--radius-pill);
}

.settingsBotOnboardingSuccess {
  color: var(--success-text);
  background: var(--success-wash);
}

.settingsBotOnboardingEmpty {
  color: var(--destructive);
  background: var(--destructive-wash);
}

.settingsBotOnboardingStatus,
.settingsBotOnboardingPrivacy {
  margin: 0;
  text-align: center;
}

.settingsBotOnboardingStatus {
  font: var(--maka-text-label);
  color: var(--foreground);
}

.settingsBotOnboardingStatus[data-state="error"],
.settingsBotOnboardingStatus[data-state="denied"] {
  color: var(--destructive);
}

.settingsBotOnboardingPrivacy {
  font: var(--maka-text-supporting);
  color: var(--muted-foreground);
}

.settingsBotOnboardingActions {
  display: flex;
  justify-content: stretch;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-5);
  border-top: var(--border-width-hairline) solid var(--border);
}

.settingsBotOnboardingActions > button {
  flex: 1;
}

@media (max-width: 620px) {
  .settingsBotOnboardingBody {
    padding-inline: var(--space-4);
  }

  .settingsBotOnboardingQrFrame {
    width: min(260px, calc(100vw - 96px));
    height: min(260px, calc(100vw - 96px));
  }
}

.settingsBotAdvanced {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.settingsBotAdvancedBody {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-3);
  border-left: var(--border-width-thick) solid var(--border);
}

.settingsBotBannerDescription {
  overflow-wrap: anywhere;
}