.community-invite-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  background: #5865f2;
  box-shadow: 0 12px 30px rgba(24, 31, 76, .28);
  font-size: .86rem;
  font-family: inherit;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}

.community-invite-fab:hover,
.community-invite-fab:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  background: #4752c4;
  box-shadow: 0 15px 34px rgba(24, 31, 76, .36);
}

.community-invite-brand-mark { display: block; flex: 0 0 auto; width: 1.2rem; height: auto; }

.community-invite-modal .modal-dialog { max-width: 31rem; }
.community-invite-modal .modal-content {
  border-radius: 18px;
}

body.portal-auth-body .community-invite-modal .modal-body {
  position: relative;
  padding: 1.8rem 1.8rem 1.75rem !important;
  text-align: center;
}
.community-invite-close { position: absolute; top: .9rem; right: .9rem; }
.community-invite-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: #5865f2;
  font-size: 1.65rem;
}
.community-invite-icon .community-invite-brand-mark { width: 1.75rem; }

.community-invite-modal h2 { max-width: 24ch; margin: 0 auto .7rem; color: var(--text-primary); font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.community-invite-modal p { max-width: 38ch; margin: 0 auto; color: var(--text-secondary); font-size: .92rem; line-height: 1.55; }
.community-invite-modal .community-invite-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: auto;
  min-width: 12rem;
  margin-top: 1.25rem;
  background: #5865f2;
  border-color: #5865f2;
  color: #fff;
}
.community-invite-modal .community-invite-action:hover,
.community-invite-modal .community-invite-action:focus-visible {
  background: #4752c4;
  border-color: #4752c4;
  color: #fff;
}

@media (max-width: 575.98px) {
  .community-invite-fab span { display: none; }
  .community-invite-fab { width: 3.35rem; padding: 0; justify-content: center; }
  .community-invite-modal .modal-dialog { margin: 1rem; }
  body.portal-auth-body .community-invite-modal .modal-body {
    padding: 1.5rem 1.1rem 1.35rem !important;
  }
  .community-invite-action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .community-invite-fab { transition: none; }
}