#bureau-boot {
  display: none;
}

html[data-bureau-boot],
html[data-bureau-boot] body {
  background: var(--boot-bg, #0f1018);
}

html[data-bureau-boot] #bureau-boot {
  position: fixed;
  inset: 0;
  /* Above the React startup veil (z-100): the shell is the FIRST paint of
   * this composition and stays on top until the veil's own copy of it is
   * ready, then leaves in one frame (src/desk/bootShell.ts). */
  z-index: 110;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background: var(--boot-bg, #0f1018);
}

html[data-bureau-boot] #bureau-boot .bureau-boot-icon {
  width: 72px;
  height: 72px;
  border-radius: 17px;
}

.bureau-boot-content {
  display: none;
}

/* Themed shell: boot.js found the last-applied skin's ground in localStorage.
 * Paint exactly what the startup veil paints (index.css .desk-loading-veil:
 * skin background + the skin's fixed wallpaper layer) and show the Envoy's
 * working poster at the veil's own avatar size, so shell → veil is one
 * unbroken surface instead of a navy app-icon splash giving way to it. */
html[data-boot-themed][data-bureau-boot] #bureau-boot {
  background: var(--boot-skin-bg, var(--boot-bg, #0f1018));
  background-size: cover;
  background-position: center top;
}

html[data-boot-themed][data-bureau-boot] #bureau-boot .bureau-boot-icon {
  display: none;
}

html[data-boot-themed][data-bureau-boot] .bureau-boot-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--boot-ink, currentColor);
  /* The one interface font (packages/shared/skinLoadingLook.ts) — every
   * Envoy wears it, so the shell never has a per-skin face to show. */
  font-family: "ABC Areal", Arial, ui-sans-serif, system-ui, sans-serif;
  text-align: center;
}

/* The words wait for that font (boot.js sets data-boot-font-ready once it is
 * usable, or after a short cap) so they never appear in a stand-in face and
 * swap; the ground and the Envoy show at once. */
html:not([data-boot-font-ready]) .bureau-boot-content strong,
html:not([data-boot-font-ready]) .bureau-boot-content small {
  visibility: hidden;
}

.bureau-boot-poster {
  width: 8rem;
  height: 8rem;
  margin-bottom: 0.25rem;
  background: var(--boot-poster) center / contain no-repeat;
}

.bureau-boot-content strong {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.025em;
}

.bureau-boot-content small {
  color: var(--boot-muted, currentColor);
  font-size: 0.75rem;
  line-height: 1rem;
  opacity: 0.75;
}

.bureau-boot-dots {
  display: flex;
  gap: 0.25rem;
  padding-top: 0.25rem;
}

.bureau-boot-dots i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: currentColor;
  animation: bureau-boot-pulse 1.5s ease-in-out infinite;
}

.bureau-boot-dots i:first-child { animation-delay: -240ms; }
.bureau-boot-dots i:nth-child(2) { animation-delay: -120ms; }

@keyframes bureau-boot-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (min-width: 640px) {
  .bureau-boot-poster {
    width: 9rem;
    height: 9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bureau-boot-dots i {
    animation: none;
    opacity: 0.65;
  }
}