.workspace-avatar-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-front, 13000);
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--popup-overlay);
}

.workspace-avatar-dialog__panel {
  width: min(460px, 100%);
  max-height: min(760px, calc(100vh - 44px));
  overflow: visible;
  display: grid;
  gap: 18px;
  padding: 30px 34px 34px;
  border-radius: 26px;
  background: var(--popup-bg);
  box-shadow: var(--popup-shadow);
  position: relative;
}

.workspace-avatar-dialog__close {
  position: absolute;
  top: 0;
  left: calc(100% + var(--popup-close-offset, 10px));
  right: auto;
  width: var(--popup-close-width, 78px);
  height: var(--popup-close-height, 55px);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--popup-bg);
  box-shadow: var(--popup-shadow-soft);
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.24s ease, filter 0.24s ease;
  will-change: transform;
}

.workspace-avatar-dialog__close .header-auth-close-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--popup-close-icon-size, 17px);
  height: var(--popup-close-icon-size, 17px);
  display: block;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.workspace-avatar-dialog__close:hover,
.workspace-avatar-dialog__close:focus-visible {
  background: var(--popup-close-hover-bg, var(--sort-control-bg));
  animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both;
  filter: var(--popup-close-hover-filter);
}

.workspace-avatar-dialog__close:focus-visible {
  outline: 2px solid var(--popup-focus);
  outline-offset: 2px;
}

.workspace-avatar-dialog__panel::before {
  content: none;
  display: none;
}

.workspace-avatar-dialog__head {
  display: block;
  text-align: center;
}

.workspace-avatar-dialog__head h2 {
  margin: 0;
  font-family: var(--popup-title-font, var(--font-display));
  font-size: var(--popup-title-size, 25px);
  font-weight: var(--popup-title-weight, 600);
  line-height: var(--popup-title-line-height, 1.16);
  letter-spacing: var(--popup-title-letter-spacing, 0);
}

.workspace-avatar-dialog__head p {
  max-width: 360px;
  margin: 12px auto 0;
  color: var(--intent-text-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.38;
}

.workspace-avatar-dialog__actions {
  width: min(420px, 100%);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workspace-avatar-dialog__actions .workspace-button {
  --workspace-button-hover-scale: 1.026;
  position: relative;
  z-index: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--intent-text-primary);
  width: 100%;
  min-height: 50px;
  height: 50px;
  max-width: 100%;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.workspace-avatar-dialog__actions .workspace-button::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: inherit;
  background: var(--intent-surface-page);
  box-shadow: inset 0 0 0 3px var(--intent-cta-ink);
  transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.workspace-avatar-dialog__actions .workspace-button:hover::before,
.workspace-avatar-dialog__actions .workspace-button:focus-visible::before {
  transform: scale(var(--workspace-button-hover-scale));
}

.workspace-avatar-dialog__actions .workspace-button:focus-visible {
  outline: none;
}

.workspace-avatar-dialog__actions .workspace-button[disabled],
.workspace-avatar-dialog__actions .workspace-button.is-disabled {
  cursor: not-allowed;
}

.workspace-avatar-dialog__choose {
  color: var(--color-ink);
}

.workspace-avatar-dialog__choose::before {
  background: var(--popup-bg);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.workspace-avatar-dialog__button-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("/assets/admin-icons/image.svg") center / contain no-repeat;
  mask: url("/assets/admin-icons/image.svg") center / contain no-repeat;
}

.workspace-avatar-dialog__save,
.workspace-avatar-dialog__save:disabled,
.workspace-avatar-dialog__save.is-disabled,
.workspace-avatar-dialog__save.is-ready:not(:disabled):not(.is-disabled) {
  color: var(--color-cream);
}

.workspace-avatar-dialog__save::before,
.workspace-avatar-dialog__save:disabled::before,
.workspace-avatar-dialog__save.is-disabled::before,
.workspace-avatar-dialog__save.is-ready:not(:disabled):not(.is-disabled)::before {
  background: var(--color-ink);
  box-shadow: none;
}

.workspace-avatar-dialog__save:not(:disabled):not(.is-disabled):hover::before,
.workspace-avatar-dialog__save:not(:disabled):not(.is-disabled):focus-visible::before {
  background: var(--color-ink);
  transform: scale(1.04);
}

.workspace-avatar-cropper {
  display: grid;
  gap: 15px;
  justify-items: center;
  padding: 4px 0 4px;
}

.workspace-avatar-cropper__stage {
  position: relative;
  width: 220px;
  height: 220px;
  max-width: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 0;
  background: var(--intent-surface-page);
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 0 0 1px var(--intent-surface-line),
    0 12px 26px color-mix(in srgb, var(--color-ink) 5%, transparent);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.workspace-avatar-cropper__stage:hover,
.workspace-avatar-cropper__stage:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--intent-surface-line-strong),
    0 15px 32px color-mix(in srgb, var(--color-ink) 8%, transparent);
}

.workspace-avatar-cropper__stage.has-photo {
  cursor: grab;
}

.workspace-avatar-cropper__stage.has-photo:active {
  cursor: grabbing;
}

.workspace-avatar-cropper__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.workspace-avatar-cropper__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--intent-text-secondary);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
}

.workspace-avatar-cropper__placeholder[hidden] {
  display: none;
}

.workspace-avatar-cropper__empty-art {
  width: 84px;
  height: 84px;
  display: block;
  color: var(--intent-text-secondary);
  opacity: 0.82;
}

.workspace-avatar-cropper__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px var(--intent-surface-raised),
    inset 0 0 0 5px var(--intent-surface-line);
  pointer-events: none;
}

.workspace-avatar-cropper__zoom {
  --workspace-avatar-zoom-progress: 0%;
  width: 220px;
  max-width: 100%;
  height: 34px;
  margin: -2px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.workspace-avatar-cropper__zoom:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-forest) 34%, transparent);
  outline-offset: 2px;
}

.workspace-avatar-cropper__zoom::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(
      90deg,
      var(--color-ink) 0 var(--workspace-avatar-zoom-progress),
      color-mix(in srgb, var(--color-ink) 10%, var(--intent-surface-page)) var(--workspace-avatar-zoom-progress) 100%
    );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 12%, transparent);
}

.workspace-avatar-cropper__zoom::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border: 3px solid var(--popup-bg);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-ink);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-ink) 18%, transparent),
    0 6px 15px color-mix(in srgb, var(--color-ink) 18%, transparent);
}

.workspace-avatar-cropper__zoom::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-ink) 10%, var(--intent-surface-page));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 12%, transparent);
}

.workspace-avatar-cropper__zoom::-moz-range-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
}

.workspace-avatar-cropper__zoom::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--popup-bg);
  border-radius: 50%;
  background: var(--color-ink);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-ink) 18%, transparent),
    0 6px 15px color-mix(in srgb, var(--color-ink) 18%, transparent);
}

.workspace-avatar-cropper__zoom[disabled] {
  cursor: not-allowed;
  opacity: 0.72;
}

.workspace-avatar-cropper__zoom[disabled]::-webkit-slider-runnable-track {
  background: color-mix(in srgb, var(--color-ink) 10%, var(--intent-surface-page));
}

.workspace-avatar-cropper__zoom[disabled]::-webkit-slider-thumb {
  background: var(--color-ink);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-ink) 18%, transparent),
    0 6px 15px color-mix(in srgb, var(--color-ink) 18%, transparent);
}

.workspace-avatar-cropper__zoom[disabled]::-moz-range-track {
  background: color-mix(in srgb, var(--color-ink) 10%, var(--intent-surface-page));
}

.workspace-avatar-cropper__zoom[disabled]::-moz-range-progress {
  background: transparent;
}

.workspace-avatar-cropper__zoom[disabled]::-moz-range-thumb {
  background: var(--color-ink);
}

.workspace-avatar-cropper__hint {
  margin: -2px 0 0;
  color: var(--intent-text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.workspace-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast, 14000);
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: var(--popup-shadow);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  pointer-events: none;
}

.workspace-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 860px), (pointer: coarse) {
  .workspace-avatar-dialog {
    --workspace-avatar-mobile-top: clamp(84px, 13dvh, 128px);
    padding: calc(env(safe-area-inset-top, 0px) + var(--workspace-avatar-mobile-top)) 0 0;
    place-items: end stretch;
    overflow: hidden;
  }

  .workspace-avatar-dialog__close {
    display: none !important;
  }

  .workspace-avatar-dialog__panel {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - (env(safe-area-inset-top, 0px) + var(--workspace-avatar-mobile-top)));
    height: calc(100dvh - (env(safe-area-inset-top, 0px) + var(--workspace-avatar-mobile-top)));
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 19px;
    padding: 0 20px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(0);
    transition: transform 0.19s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .workspace-avatar-dialog.is-sheet-dragging .workspace-avatar-dialog__panel {
    transform: translateY(var(--workspace-avatar-sheet-drag-y, 0px));
    transition: none;
  }

  .workspace-avatar-dialog.is-sheet-settling .workspace-avatar-dialog__panel,
  .workspace-avatar-dialog.is-sheet-closing .workspace-avatar-dialog__panel {
    transform: translateY(var(--workspace-avatar-sheet-drag-y, 0px));
  }

  .workspace-avatar-dialog__panel::before {
    content: "";
    display: block;
    position: sticky;
    top: 0;
    z-index: 1;
    flex: 0 0 44px;
    min-height: 44px;
    width: calc(100% + 40px);
    margin: 0 -20px;
    border-radius: var(--popup-sheet-radius, 22px 22px 0 0);
    background: var(--popup-sheet-grip-pseudo-bg);
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  .workspace-avatar-dialog__head {
    flex: 0 0 auto;
  }

  .workspace-avatar-dialog__options {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 -6px;
  }

  .workspace-avatar-dialog__actions {
    flex: 0 0 auto;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: auto;
  }

  .workspace-avatar-dialog__actions .workspace-button {
    min-height: 48px;
    height: 48px;
    padding-inline: 16px;
  }
}