/* Raphael-style Blazor Server reconnect overlay.
   Blazor toggles state classes on #components-reconnect-modal:
   -show (retrying), -failed (retries exhausted), -rejected (circuit gone). */

#components-reconnect-modal { display: none; }

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex; position: fixed; inset: 0; z-index: 1090;
  align-items: center; justify-content: center;
  background: rgba(10, 0, 60, .32); backdrop-filter: blur(2px);
  font-family: 'Open Sans', system-ui, sans-serif;
  animation: cgs-reconnect-fade .15s ease-out;
}

.cgs-reconnect__card {
  width: min(92vw, 340px); background: #fff; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(10, 0, 60, .22); padding: 28px 26px 24px;
  text-align: center; border-top: 4px solid #8a30ff;
}

.cgs-reconnect__spinner {
  width: 42px; height: 42px; margin: 4px auto 16px; border-radius: 50%;
  border: 4px solid #ece6fb; border-top-color: #8a30ff;
  animation: cgs-reconnect-spin .8s linear infinite;
}

.cgs-reconnect__title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: #0a003c; }
.cgs-reconnect__text  { margin: 0; font-size: .875rem; line-height: 1.45; color: #5f6368; }
.cgs-reconnect__attempt { color: #6c38b0; font-weight: 600; }

.cgs-reconnect__btn {
  margin-top: 16px; border: 0; border-radius: 8px; background: #8a30ff; color: #fff;
  font-weight: 600; font-size: .875rem; padding: 9px 20px; cursor: pointer; transition: background .15s ease;
}
.cgs-reconnect__btn:hover { background: #7726e0; }

.cgs-reconnect__body { display: none; }
#components-reconnect-modal.components-reconnect-show     .cgs-reconnect__body--show     { display: block; }
#components-reconnect-modal.components-reconnect-failed   .cgs-reconnect__body--failed   { display: block; }
#components-reconnect-modal.components-reconnect-rejected .cgs-reconnect__body--rejected { display: block; }
#components-reconnect-modal.components-reconnect-failed   .cgs-reconnect__spinner,
#components-reconnect-modal.components-reconnect-rejected .cgs-reconnect__spinner { display: none; }

@keyframes cgs-reconnect-spin { to { transform: rotate(360deg); } }
@keyframes cgs-reconnect-fade { from { opacity: 0; } to { opacity: 1; } }