/* Chrome of the v2 thin client: everything else comes from the server rendered components. */
html, body { margin: 0; min-height: 100%; }
#rx-app { min-height: 100vh; }

.rx-client-busy {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  background: linear-gradient(90deg, transparent, var(--rx-primary, #2563eb), transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: rx-client-busy 1s linear infinite;
}
.rx-client-busy[hidden] { display: none; }
@keyframes rx-client-busy { from { background-position: -50% 0; } to { background-position: 150% 0; } }

.rx-client-error {
  position: fixed; inset: 0; z-index: 2100; display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .35);
}
.rx-client-error > rx-alert { max-width: 520px; width: 100%; }
.rx-client-error-actions { display: flex; gap: 8px; }

.rx-v2-placeholder { max-width: 640px; margin: 48px auto; padding: 0 16px; }
.rx-v2-placeholder rx-text, .rx-v2-placeholder rx-button { display: block; margin-top: 12px; }