/*
  Streamer mode is a visual privacy layer for private CRM pages.
  Real values stay in the DOM and forms so the owner can keep working.
*/

/* Partial masks must stay in the normal inline text flow; flex creates a hanging
   indent when long private names wrap after the visible prefix. */
.ncrm-private-mask {
  display: inline;
  max-width: 100%;
  overflow-wrap: inherit;
  vertical-align: baseline;
  white-space: inherit;
  word-break: inherit;
}

.ncrm-private-mask__visible,
.ncrm-private-mask__blur {
  display: inline;
}

.ncrm-private-mask__blur {
  overflow-wrap: inherit;
  word-break: inherit;
}

.object-picker-item__name .ncrm-private-mask {
  display: inline-grid;
  grid-template-columns: max-content minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
  vertical-align: baseline;
}

/* The generic modal rule targets every span and is more specific than the
   compact mask classes. Keep the public prefix in an explicit max-content
   grid column so that rule can never make the first characters shrink. */
.modal-list .checkbox-row .object-picker-item__name .ncrm-private-mask__visible {
  display: block;
  min-width: max-content;
  overflow-wrap: normal;
  word-break: normal;
}

.modal-list .checkbox-row .object-picker-item__name .ncrm-private-mask__blur-clip {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  contain: paint;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
}

.modal-list .checkbox-row .object-picker-item__name .ncrm-private-mask__blur-clip > .ncrm-private-mask__blur {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
}

/* CSS text-overflow is not reliable when the clipped inline content is a
   filtered descendant. JS adds this class from real scroll geometry, and the
   unfiltered wrapper paints a stable ellipsis above the clipped blur. */
.modal-list .checkbox-row .object-picker-item__name .ncrm-private-mask__blur-clip.is-overflowing::after {
  content: "\2026";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  width: 1.35em;
  justify-content: flex-end;
  background: linear-gradient(to right, transparent, var(--color-surface-subtle) 42%);
  color: var(--color-text);
  pointer-events: none;
}

/* A browser can briefly combine the current CSS with pre-wrapper picker HTML
   from its cache during a rolling update. Keep that legacy direct child
   shrinkable and ellipsized; the streamer-only gap contains the filter paint
   so it cannot cover the visible prefix. */
.object-picker-item__name .ncrm-private-mask > .ncrm-private-mask__blur {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

[data-streamer-mode="on"] .object-picker-item__name .ncrm-private-mask > .ncrm-private-mask__blur {
  margin-inline-start: 8px;
}

[data-streamer-mode="on"] .ncrm-private-mask__blur,
[data-streamer-mode="on"] [data-private-blur] {
  filter: blur(var(--streamer-mode-blur, 5px));
}

[data-streamer-mode="on"] .ncrm-private-mask--name .ncrm-private-mask__blur,
[data-streamer-mode="on"] .ncrm-private-mask--title .ncrm-private-mask__blur {
  --streamer-mode-blur: 4px;
}

/* A fixed blur that works for body text becomes readable in large headings.
   Scale it with the heading font size so every private title stays obscured. */
[data-streamer-mode="on"] :is(h1, h2, h3, h4, h5, h6) .ncrm-private-mask--name .ncrm-private-mask__blur,
[data-streamer-mode="on"] :is(h1, h2, h3, h4, h5, h6) .ncrm-private-mask--title .ncrm-private-mask__blur {
  --streamer-mode-blur: 0.34em;
}

[data-streamer-mode="on"] .ncrm-private-mask--contact .ncrm-private-mask__blur,
[data-streamer-mode="on"] .ncrm-private-mask--legal .ncrm-private-mask__blur,
[data-streamer-mode="on"] .ncrm-private-mask--amount .ncrm-private-mask__blur,
[data-streamer-mode="on"] .ncrm-private-mask--note .ncrm-private-mask__blur {
  --streamer-mode-blur: 6px;
}

[data-streamer-mode="on"] input[data-private-field],
[data-streamer-mode="on"] select[data-private-field],
[data-streamer-mode="on"] textarea[data-private-field] {
  filter: blur(5px);
}

.streamer-mode-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 2px;
  border-radius: 999px;
  cursor: pointer;
  opacity: .45;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}

.streamer-mode-toggle:hover,
.streamer-mode-toggle:focus-visible,
.streamer-mode-toggle.is-active {
  color: var(--color-text-secondary);
  opacity: .8;
}

.streamer-mode-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.streamer-mode-toggle:disabled {
  cursor: wait;
  opacity: .35;
}

.streamer-mode-toggle__icon {
  display: inline-flex;
  line-height: 0;
}

.streamer-mode-toggle__icon--on {
  display: none;
}

[data-streamer-mode="on"] .streamer-mode-toggle__icon--off {
  display: none;
}

[data-streamer-mode="on"] .streamer-mode-toggle__icon--on {
  display: inline-flex;
}