apps/desktop/src/renderer/styles/onboarding.css

.maka-onboarding {
  min-width: 0;
}

.maka-onboarding-center {
  min-width: 0;
}

.maka-onboarding-wordmark {
  color: var(--maka-brand);
}

.maka-onboarding-card {
  overflow: hidden;
}

.maka-onboarding-header h1 {
  text-wrap: balance;
}

.maka-onboarding-header p {
  text-wrap: pretty;
}

.maka-onboarding-provider-group,
.maka-onboarding-actions {
  min-width: 0;
}

.maka-onboarding-provider-list {
  max-height: min(320px, 42vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ChatLayout always paints its frosted composer dock, even when the Composer
   itself is hidden. Onboarding owns the whole empty surface, so that dock has
   no content to support and would blur the card actions behind it. Derive the
   opt-out from the mounted surface instead of duplicating onboarding state. */
.maka-chat-layout:has(.maka-onboarding-surface) > :last-child {
  display: none;
}

/* The snapshot slot blocks the ordinary empty-chat hero while main resolves
   onboarding state. The frame keeps the ready card's geometry; the bars inside
   are Astryx Skeletons (DESIGN.md §10) rather than hand-drawn statics. */
.maka-onboarding-loading {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  width: min(460px, calc(100% - 32px));
  min-height: 196px;
  margin: auto;
  padding: var(--space-8) var(--space-6);
  overflow: hidden;
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-modal);
  background: var(--foreground-5);
}

.maka-onboarding-surface {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: calc(100dvh - 84px);
  padding: var(--space-8) var(--space-6);
}

@media (max-width: 560px) {
  .maka-onboarding-surface {
    padding: var(--space-6) var(--space-4);
  }
}

@media (max-height: 720px) {
  .maka-onboarding-surface {
    align-items: start;
  }
}