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. Its shape previews the single card that will replace it. */
.maka-onboarding-loading {
  position: relative;
  width: min(460px, calc(100% - 32px));
  min-height: 196px;
  margin: auto;
  overflow: hidden;
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-modal);
  background: var(--foreground-5);
}

.maka-onboarding-loading::before,
.maka-onboarding-loading::after {
  content: "";
  position: absolute;
  left: 24px;
  border-radius: var(--radius-pill);
  background: var(--foreground-8);
}

.maka-onboarding-loading::before {
  top: 32px;
  width: min(240px, calc(100% - 48px));
  height: 16px;
}

.maka-onboarding-loading::after {
  top: 64px;
  width: min(360px, calc(100% - 48px));
  height: 12px;
}

.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;
  }
}