/* One appearance for referral and task links on every screen. */
.copy-link-field {
  display: flex; align-items: center; gap: 4px;
  width: 100%; min-width: 0; min-height: 56px;
  padding: 8px 10px 8px 16px; border: 0; border-radius: 12px;
  overflow: hidden; background: #262b33; box-shadow: none;
}
.copy-link-field > input {
  flex: 1; width: 0; min-width: 0; margin: 0; padding: 0; border: 0;
  background: transparent; color: #b9c2d0; font: 400 13px/1.5 Onest, sans-serif;
  text-overflow: clip;
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.copy-link-field > button {
  display: grid; place-items: center; flex: 0 0 40px;
  width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none; color: #b9c2d0;
  transition: color 140ms ease;
}
.copy-link-field > button:active:not(:disabled) { transform: none; opacity: 1; color: #f0f5ff; }
.copy-link-field > button:focus-visible { outline: 2px solid #8ebcff; outline-offset: 2px; }
.copy-link-field:has(> input:focus-visible) { outline: 2px solid #8ebcff; outline-offset: 2px; }
.copy-link-field .copy-link-icon { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .copy-link-field > button { transition: none; } }